我正在尝试进行以下布局
-----------------------
|Header |
-----------------------
|A| B |
| | |
| | |
| | |
| | |
| | |
| | |
-----------------------
|Footer |
-----------------------
以下情况适用：
我已经尝试了很多基于表行的定位，并在stackoverflow上搜索了类似的问题，但还没有找到任何可以100％工作的解决方案。
将页眉和页脚排除在外，这是我尝试过的一些CSS（当浏览器窗口变小时B流入A，工具栏是整个窗口的100％ - 太高了）：
div#A {
display: inline-block;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#B {
display: inline-block;
max-width: 700px;
float: left;
overflow:scroll;
white-space: nowrap;
}
另一种方法（更好，但B仍然在A下方而不是滚动条）：
div#wrapper {
display: table-row;
height: 100%;
width: 100%;
}
div#A {
display: table-cell;
height: 100%;
overflow: hidden;
margin: 0 0 0 0;
float: left;
width: 3.5em;
}
div#A.open {
width: auto;
}
div#content {
display: table-cell;
max-width: 600px;
float: left;
overflow:scroll;
}
答案 0 :(得分：3)
<强> HTML
<header></header>
<main>
<div id="a"></div>
<div id="b"></div>
</main>
<footer></footer>
- 页眉和页脚以固定高度和完整视口宽度保持原位
//css
header, footer {
width: 5%; //fixed width that stay in place with a fixed height
}
- A剩余可用高度，宽度可动态更改
//css
main {
width: 100%;
}
main #a {
float: left;
height: 100%;
width: 30%; //can be any width
}
- B取剩余的可用高度和宽度。当A变宽时减小宽度，反之亦然
/*#b will automatically take the rest of main!
because it has overflow:hidden */
#b {
overflow: hidden;
width: auto;
height: 100%;
}
无论内容有多宽，
- B都不会流向下一行。 （而不是滚动条）。
在这里，我不确定你想要什么，所以小提琴缺乏这一部分。
你想要一个----＆gt;或
- |
- |
- |
- |
▼
滚动条？ 1。
替换overflow:hidden;
与overflow-x: scroll;
或overflow-y: scroll;
或两种方式overflow: auto
例如Fiddle：）
答案 1 :(得分：1)
尝试这样的事情：
<html>
<head>
<style>
#header
{
height:10%;
width:100%;
background-color:yellow;
}
#footer
{
height:10%,
width:100%;
background-color:red;
clear:left
}
#A
{
display:inline-block;
float:left;
height: 80%;
width: 5em;
background-color:green;
}
#B
{
display:inline-block
float:left;
height:80%;
background-color:blue;
overflow: scroll;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="A">A</div>
<div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec imperdiet ipsum, in dapibus nulla. Aenean iaculis lorem urna, at mattis metus ultricies ac. Aliquam sodales rhoncus metus, vitae fermentum ligula ornare nec. Nunc velit justo, ornare nec nulla eget, laoreet lobortis dui. Cras blandit odio dolor, a maximus nisl maximus a. Praesent nunc diam, euismod a iaculis vitae, mattis sed quam. Integer et luctus magna. Vivamus elementum arcu in leo suscipit, at aliquet arcu eleifend. Nunc tincidunt purus non orci feugiat tempor. In dapibus velit sapien, sed egestas erat lobortis sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non efficitur erat. Nullam iaculis id tellus vel rutrum. Donec porta ultricies vestibulum. Phasellus congue enim ante, vitae posuere augue ornare vitae.
<br />
<br />Pellentesque dolor mi, ullamcorper non odio et, tincidunt rhoncus dolor. Maecenas cursus est nec sem varius fringilla. Praesent tempor sit amet est eget convallis. Nunc tempor tempus mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sagittis sodales posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac lacinia felis. Fusce ultrices semper erat id imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis blandit orci. Vivamus pretium viverra ligula ac posuere. Vestibulum commodo, ante sed tempus lobortis, urna est porttitor dui, at dignissim massa nunc sed urna.
<br />
<br />Donec dictum lacus nec libero accumsan, auctor egestas metus sollicitudin. Nam pellentesque, ante quis lacinia tristique, sem dolor imperdiet mi, ornare consectetur tortor dui in mauris. Nulla facilisi. In sed dolor augue. Nulla ullamcorper felis vitae leo posuere posuere sit amet sed dui. Duis iaculis lorem porttitor risus iaculis congue. Mauris malesuada iaculis sapien vitae pulvinar. Nunc ut ipsum nibh. Aliquam vehicula quam eget malesuada lacinia. Curabitur eget magna ut erat pellentesque mattis sit amet eget ante. Cras et auctor felis. Nam justo diam, iaculis vel ligula sed, placerat lobortis lectus. Nulla dui enim, interdum eu posuere vel, sollicitudin non mauris.
<br />
<br />Morbi sit amet ultricies erat, vitae pharetra orci. Maecenas id lacus vestibulum, pellentesque ex eget, sollicitudin velit. Maecenas ultricies facilisis efficitur. Phasellus elementum tortor at ex convallis, in imperdiet nisi vulputate. Cras arcu tortor, faucibus et mattis vitae, aliquet vel ante. Nulla nec ipsum quis ex blandit elementum. In aliquam, elit ac aliquet faucibus, orci turpis tincidunt tortor, id suscipit erat urna at elit. Donec magna purus, vestibulum id erat vitae, iaculis sodales sapien.
<br />
<br />Quisque malesuada nunc vitae augue volutpat laoreet. Nulla egestas, nisi et fermentum congue, tortor neque finibus tellus, vel vulputate tellus tellus ut sapien. Integer fringilla posuere tellus ac mattis. Integer eget ultricies est. Aenean bibendum sapien vitae leo euismod vehicula. Curabitur venenatis ipsum quis porttitor facilisis. Morbi tincidunt condimentum urna, vitae pretium lorem pretium finibus. Vivamus volutpat erat nec tortor convallis mollis. Donec gravida orci ut elementum fringilla. Suspendisse fermentum, turpis id dapibus finibus, leo nulla suscipit sem, non aliquet ipsum est sit amet lacus. In hac habitasse platea dictumst. Aliquam pulvinar, erat in maximus maximus, eros velit blandit orci, id bibendum velit tortor non mi. Nulla risus tortor, semper sit amet nisi id, vestibulum efficitur augue. Ut quis ornare arcu, eu semper lectus.
<br />
<br />Nulla ut rhoncus orci. Duis et nulla commodo, mattis ligula imperdiet, aliquam arcu. Curabitur justo nulla, tristique sagittis convallis sed, convallis at purus. Donec urna nisi, ultrices a condimentum sed, ornare sit amet magna. Sed vel lacus eget lectus elementum efficitur nec vel velit. Sed sodales odio nec neque ornare, ac pulvinar eros tincidunt. Praesent interdum ac ligula non dictum. Vestibulum cursus hendrerit sollicitudin. Maecenas ultricies sapien viverra est aliquam, in pellentesque enim porta. Ut suscipit lorem at molestie malesuada. Aenean fermentum porta dolor, sed sagittis nisl tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut feugiat urna quam, a lacinia arcu placerat cursus. Integer lectus purus, eleifend et aliquam sed, consequat ac quam. Etiam et nisi enim. Quisque egestas pharetra erat et vehicula.
<br />
<br />Aenean convallis, purus at convallis vestibulum, nulla est pulvinar sem, ut varius dui elit et ligula. Donec porttitor rhoncus libero dignissim lacinia. Aenean eu nulla consectetur, mattis est ac, bibendum ante. Suspendisse vehicula nibh et mauris ornare, at finibus nulla aliquet. Aenean in scelerisque neque. Nulla quam lectus, consequat eu purus id, aliquam ultrices dui. Praesent et dolor pulvinar, imperdiet eros nec, lobortis justo. Mauris feugiat nulla a rhoncus aliquet. Cras ut imperdiet ante. Ut quis metus scelerisque, volutpat neque quis, pulvinar tortor. Nam placerat rhoncus lorem, non pharetra lectus auctor eget. Suspendisse in quam vitae augue blandit ultricies. Vivamus vulputate quam est, a pharetra erat porta eu. Quisque metus magna, porta eu euismod sed, porta sed erat. Aenean ornare, ante a scelerisque condimentum, ante velit aliquet arcu, vitae dictum nulla mi at massa. Quisque quis vestibulum velit, et placerat risus.
<br />
<br />Morbi cursus nibh eu ipsum mollis, non molestie leo auctor. Duis bibendum, neque eu tincidunt dignissim, nulla sem tincidunt metus, a lacinia risus libero eu nisl. Cras lobortis volutpat felis, in sollicitudin turpis tristique vel. Aliquam erat volutpat. Cras velit quam, tristique sit amet felis quis, consequat finibus nunc. Vivamus tempor nunc nec nibh mollis vulputate. Mauris pulvinar nibh ac eros fermentum luctus. Ut at orci ut est luctus pellentesque a quis nisl. Nunc posuere tellus ex, in porta felis vulputate vel. Donec rutrum faucibus risus. Donec sapien dui, porta quis volutpat eu, tincidunt eu quam. Sed eleifend pellentesque magna, vel tempus enim dictum tincidunt. Vestibulum nisl lorem, commodo vel ipsum quis, semper sodales leo.
<br />
<br />Vestibulum leo urna, sollicitudin eget ultricies at, scelerisque a lectus. Donec tellus sem, elementum et elit eget, lacinia posuere elit. In lacus ex, vehicula sit amet lacus et, dapibus molestie mauris. Donec ac justo metus. Sed eget faucibus dolor. Mauris sollicitudin vehicula augue, nec molestie est fringilla sed. Vivamus non neque arcu. Proin rhoncus justo in ex vehicula mollis. Nam at commodo neque. Sed consequat lacinia augue, ac iaculis enim cursus vitae. Aliquam varius augue ac condimentum vehicula. Vestibulum quis eros vitae elit maximus varius non eu ipsum. Nullam mollis urna nulla, et sagittis dolor mollis sit amet. Ut ut purus ac augue laoreet facilisis ac non lectus.
<br />
<br />Nulla tincidunt non diam nec posuere. Phasellus sodales bibendum magna iaculis ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies magna ac metus mollis tincidunt. Aenean dignissim egestas odio, id vestibulum ex ultricies in. Aliquam faucibus arcu eu enim maximus, vel hendrerit ipsum aliquet. Vestibulum posuere urna a tortor dapibus malesuada. Curabitur feugiat magna id dolor fringilla, quis suscipit lacus pellentesque. Pellentesque tristique sem urna, ut luctus erat mollis ut. Vivamus eget ultrices est, nec facilisis nisl. Integer cursus auctor lorem ut imperdiet. Vestibulum finibus odio sit amet sapien pulvinar egestas. Nunc tincidunt mi sed ex faucibus dictum. In sed tempor libero. Donec tortor nulla, malesuada vel urna laoreet, commodo interdum velit.</div>
<div id="footer">Footer</div>
</body>
</html>
overflow: scroll为您提供了滚动条，white-space: nowrap删除了自动换行。