我想添加自动延伸 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%;
}
答案 0 :(得分:1)
你真的可以清理那个CSS。没有必要用完整的对象路径声明所有内容。
您的#content div width由父#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 Here 强>