0

我想在内容过满时添加自动拉伸并向页面content div添加水平滚动。width

您可以在此处查看 HTML/CSS：http: //jsfiddle.net/Rknbs/

HTML

   <div id="layout">
        <div id="header">
        <h1><span id="_t13">My App</span></h1>
      <div class="username-logout">   
        <h4 class="username">Welcome <span>Admin Mahmoud </span></h4>
        <a id="logout" href="/logout">Logout</a>
      </div> 
   </div>

   <div id="content">
       <div class="div1">
          <h2>This is the contenttttttttttttttttttttttttttttttttttttttttttttttttttt</h2>
       </div>    

       <div class="tableClass">
            <table>
                 <tbody>
                      <tr>
                      <td><label>Name:</label></td>
                      </tr>
                     <td><input type="text" style="width:-moz-available"></td>
                </tbody>
            </table>
        </div>
        </div>

        <div id="footer">
           <h2>Powered By: My COMP </h2>
        </div>

        </div>

CSS

    body #layout {
    height:100%;
    width: 70%;
    position: fixed;    
    padding-left: 15%;
    padding-right: 15%;    
    margin-top: -8px;
    overflow: scroll;

}


body #layout #header{
     height:20%;  
}


body #layout #header h1 {
    margin-bottom: 3%;
    max-width: -moz-max-content;
}

body #layout #header .username-logout {
    background-color: #516170;
    height: 19%;
    color: white;  
}

body #layout #header .username-logout .username{
    margin-bottom: 0;
    float:left;
    margin-top: 0.5%;
    margin-left: 0.5%;
    font-weight:lighter;
}

body #layout #header .username-logout .username span{
    font-weight: bold !important;
}

body #layout #header .username-logout #logout {
    float: right;  
    margin-right: 0.5%;
    margin-top: 0.5%;
    color: #FFFFFF;
}


body #layout #content{
    min-height:60%;    
    border:1px solid black;
   /* background-color: #F8F8FF; */
}

body #layout #content .contentTitle{
    margin-left: 1%;
}

body #layout #content .contentTitle .welcomeHome{
    color: #516170;
}

body #layout #content #add-new-link{
    margin-left: 1%;
}

body #layout #content .submit-cancel{
    margin-left: 10%;
}

body #layout #content .submit-cancel input{
    margin-right: 1%;
}


body #layout #footer{
    height:10%;
    text-align: center;
    padding-top: 25px;
    font-size: 60%;
}

.div1{
    background-color: lavender;
    border-color: lavender;
    border-style: inset;
    border-width: thin;
    float: left;
    width: auto;
}

.tableClass{
    margin-left: 10%;
    width: 80%;
}

body #layout #content table tbody tr td{
    padding-bottom: 0.5%;    
    padding-top: 0.5%;
}
4

1 回答 1

1

你真的可以清理那个 CSS。无需使用完整的对象路径声明所有内容。

您的#content div 宽度由父#layout div 控制。如果#layout div 具有固定宽度，则它的宽度与#content div 可以增长的一样宽。它不会“自动增长”比它的父容器大。如果您希望 div 水平拉伸，请从 #layout CSS 中删除 width 属性。

无论如何......如果你想让#content div水平滚动......

#content {
min-height:60%;    
border:1px solid black;
width:100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}

你可能不想要 nowrap 属性，但我把它扔进去了。

更新了 jsfiddle ..... 我所做的只是删除宽度：70%；从身体#layout

jsFiddle在这里

于 2011-12-13T11:11:58.170 回答