当宽度已满时无法拉伸div

Question

我想在content div中添加自动拉伸，并在内容宽度时向页面添加水平滚动 溢出。

您可以在此处查看 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%;
}

Answer 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.....我所做的就是删除 width: 70%;来自 body #layout

jsFiddle 此处