1

我在一个页面中创建了两个 div，一个是标题，另一个是内容

   <div id="main"> 
    <div id="header">
    </div>
    <div id="content"> 
    </div>
   </div>

而且风格是

<style>
#main{
height:100%;
}
#header{
height:100px
}

#content{
height:???? // to fit the content 100% on any kind of screen 
}
</style>

我想根据屏幕调整内容。屏幕高度可以是 100 像素，也可能是 2000 像素。我怎么能用css做到这一点。我不希望底部有空白或滚动页面

4

5 回答 5

2

如果您可以使用 CSS3，则此代码：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main{
    height:100%;
    background-color: blue;
}

#header{
    height: 10%;
    background-color: green;
}

#content{
    height: -webkit-calc(100% - 105px);
    background-color: red;
}

将在 chrome 中解决问题。您将不得不为其他浏览器测试该calc属性的替代方案。您将不得不使用父元素的边距和填充来获得您想要的效果，但这就是我们的想法。

如果 CSS3 不是一个选项，那么你将不得不以百分比定义你的标题，除非比我更聪明的人可以给你一个更好的选择:)。

于 2012-12-10T10:32:49.523 回答
1

如果您想使用 css 进行此布局，则必须查看这些。

display: box;

或者

height: calc(100% - 100px);

但这些在旧浏览器中不受支持。display: box 在 ie9 中无法使用。

一些javascript也是如此。

document.getElementById('content').style.height = (document.getElementById('main').clientHeight - 100) + "px";

在 body 的 onload 事件中调用它。

于 2012-12-10T10:36:16.863 回答
1

添加这些行

             html,body{height:100%;}.

             #main{height:100%; }
             #header{height:100px; background:#ccc; }
             #content{min-height:90%; background:#666; }​

这将使您在屏幕上进行调整

于 2012-12-10T10:36:42.480 回答
0

添加html, body { height: 100%; }和使用position:absolute

让两个内部 div 都有position:absolute，它应该从浏览器的顶部开始。用于z-index切换 div。

HTML 

<div id="main"> 
    <div id="header">c
    </div>
    <div id="content">
       <div class="hidden">This div helps to push the content 100px below</div>
        cxbvbvbvcbv
    </div>
   </div>​

CSS

html, body {  height: 100%;   }
#main{height:100%; position:relative}
#header{height:100px; background:green; position:absolute; top:0; left:0; width:100%; z-index:1000}
#content{height:100%; background:grey; position:absolute; top:0; left:0; width:100%; z-index:1; }​

演示更新

于 2012-12-10T10:30:19.650 回答
0

在 css 中试试这个

html, body {  height: 100%;   }
#main{height:100%; overflow:hidden}
#header{height:100px; background:green; }
#content{height:100%; background:#F00; overflow:auto; }​

这是小提琴链接

于 2012-12-10T10:41:59.847 回答