我目前正在尝试将下面的布局从表格转换为 div。它具有以下特点:
- 100% 的宽度和高度(相对于浏览器窗口大小)
- 上半部分占100%的80%,下半部分占20%
- 当文本溢出时,顶部在 y 方向滚动,固定标题不随滚动移动,但下面的文本(lorem ipsum ...)将在其下方移动
- 底部完全不滚动
如何在 DIV 而不是表格中完成此操作?
到目前为止,这是我的代码:http://jsfiddle.net/zhz2m/1/
<table width="100%" height="100%" id="container">
<tr>
<td height="85%" id="top"><div id="chat" style="height: 100%; overflow: scroll-y">
<h2>Innovation Week 2013 - Virtual Idea Wall</h2>
</div></td>
</tr>
<tr>
<td height="10%" id="bottom"><form id="send-message">
<p>
<label for="title">Please give your idea a title</label>
<br />
<input type="text" id="title" name="title"/>
</p>
<p>
<label for="message">Please provide details of your idea</label>
<br>
<input type="text" id="message" name="message"/>
</p>
<p>
<input type="submit">
</p>
</input>
</form></td>
</tr>
</table>
最佳答案
看看这个 fiddle :
定义高度、固定位置和溢出行为。
CSS:
#main {
width: 100%;
height: 80%;
min-height: 80%;
max-height: 80%;
position: fixed;
overflow: scroll;
}
#footer {
width: 100%;
height: 20%;
min-height: 20%;
max-height: 20%;
position: fixed;
bottom: 0;
background-color: orange;
}
标记:
<div id="main">content</div>
<div id="footer">fixed at bottom</div>
关于html - 使用 DIV 而不是表格重新设计 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17776282/