css - 相对于窗口的动态 div 高度

标签 css html

我的html结构是

<body>
<div class="divHead"></div>
<div class="divBody"></div>
</body>

我想做的是给 divHeader 一个固定的高度,比方说 100px,让 divBody 正好扩展到页面的末尾,没有浏览器的滚动条。

所以,如果用户的窗口是 1000px,正文将是 900px 等等...

如果我将 divBody 高度设置为 100%,它将占据主体的 100%,这意味着将在页面中创建一个滚动条。

提前致谢

最佳答案

你可以使用绝对定位:FIDDLE: http://jsfiddle.net/Z4vNN/2/

.divHead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: red;
}

.divBody {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: green;
    overflow: auto;
}

关于css - 相对于窗口的动态 div 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16899711/

相关文章:

html - WordPress CSS - 对齐图像

javascript - 加载页面时隐藏 div,单击链接时显示

javascript - 控制速度和改变球的颜色

html - JQuery Mobile - 我的左侧菜单显示了我页面的所有内容

html - OSX 上的 Safari 奇怪地呈现 margin-top

javascript - 使用 Angular 获取 div 的 clientHeight?

javascript - 鼠标悬停和鼠标离开外部 div

css - 嵌入式要点有额外的换行符

jquery - jsp页面中struts标签的响应式设计页面

php - CSS 分页不格式化