css高度标准模式_Css_Html_Standards_Height

css高度标准模式

css html

css高度标准模式,css,html,standards,height,Css,Html,Standards,Height,你好，很高兴认识你。我想问以下问题。 <body> <div style="border:1px solid #ff0000"> <pre>dfssdgfdsgsd sdgsdg sgdsdsgsdg</pre> </div> <div style="border:1px solid #ff0" id="secondDiv"> ggg <

你好，很高兴认识你。我想问以下问题。

<body> <div style="border:1px solid #ff0000"> <pre>dfssdgfdsgsd sdgsdg sgdsdsgsdg</pre> </div> <div style="border:1px solid #ff0" id="secondDiv"> ggg </div> </body> DFSSDGFDSDGSD sdgsdg SGDSGSDG ggg 有没有可能让#secondDiv占据剩余垂直空间的100%（高度）？我不想使用最小高度（在ie中不起作用）或javascript。
完整的html
谢谢。
ps：我知道存在很多相关问题，因此如果出现重复的问题，我很抱歉。

将

#secondDiv{height:100%；}

添加到您的CSS中

我相信为了在IE中工作，你需要设置

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#head{
  border:1px solid #ff0000;
  height:50px;
}
#content{
  position:absolute;
  top:50px;
  bottom:0;
  width:100%;

  border:1px solid #ff0;
}

同样

如果您可以使用固定高度的顶部div，则可以通过使用绝对定位轻松地围绕第二个div进行操作

CSS

<body>
    <div id="head">
        <pre>dfssdgfdsgsd sdgsdg
        sgdsdsgsdg</pre>
    </div>
    <div id="content">
        ggg
    </div>
</body>

HTML


DFSSDGFDSDGSD sdgsdg
SGDSGSDG
ggg

演示：

minheight

仅在IE6中不起作用。第一个div有固定的高度吗？@Gaby:没有。你认为第一个div使用20%，第二个div使用80%吗？一个可能的替代方法（而不是完全没有高度）可以是以像素为单位测量的高度。不，这没有帮助#secondDiv将拥有100%的主体，忽略第一个div。@tasoss，问题是如果您定义了一个高度（以任何单位

或

px

），这意味着高度是固定的。当然。。。如果头的高度不固定，你会想到一个纯css解决方案吗？顺便说一句，谢谢：）@tasoss，纯css是不可能的。一个技巧（取决于需求）是将

#标题

放在100%高度

#内容

的内部，而无需绝对定位。如果您想像示例中那样使用边框，则将不起作用。。

<body>
    <div id="head">
        <pre>dfssdgfdsgsd sdgsdg
        sgdsdsgsdg</pre>
    </div>
    <div id="content">
        ggg
    </div>
</body>