CSS如何设置分区高度100%减去nPx_Css_Height

CSS如何设置分区高度100%减去nPx

css

CSS如何设置分区高度100%减去nPx,css,height,Css,Height,我有一个包装器div，它包含两个相邻的div。在这个容器上面，我有一个div，其中包含我的头。包装div必须为100%减去收割台高度。头部约为60像素。这是固定的。所以我的问题是：如何将包装器div的高度设置为100%减去60px <div id="header"></div> <div id="wrapper"> <div id="left"></div> <div id="right"></div>

我有一个包装器div，它包含两个相邻的div。在这个容器上面，我有一个div，其中包含我的头。包装div必须为100%减去收割台高度。头部约为60像素。这是固定的。所以我的问题是：如何将包装器div的高度设置为100%减去60px

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

如果您需要支持IE6，请使用JavaScript来管理包装器div的大小（在读取窗口大小后以像素为单位设置元素的位置）。如果您不想使用JavaScript，那么就不能这样做。有一些变通办法，但预计一两周后，它将在每种情况下和每种浏览器中都能正常工作

对于其他现代浏览器，请使用以下css：

position: absolute;
top: 60px;
bottom: 0px;

使用设置为100%的外部包装div，然后您的内部包装div 100%现在应该是相对于该值的

我确信这曾经对我有用，但显然不是：

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>


一些文本
在左边
一些关于
正确的

这是一个工作css，在Firefox/IE7/Safari/Chrome/Opera下测试

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

“overflow-y”不是w3c批准的，但每个主流浏览器都支持它。如果内容过高，您的两个div#left和#right将显示一个垂直滚动条

要在IE7下工作，您必须通过添加DOCTYPE来触发符合标准的模式：


*{边距：0px；填充：0px；溢出：隐藏}
div{位置：绝对}
div#header{top:0px；left:0px；right:0px；height:60px}
div#包装{顶部：60px；左侧：0px；右侧：0px；底部：0px；}
div#left{top:0px；bottom:0px；left:0px；width:50%；overflow-y:auto}
div#right{top:0px；bottom:0px；right:0px；width:50%；overflow-y:auto}
高含量

这并不能完全回答所提出的问题，但它确实创造了与您试图实现的相同的视觉效果

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>


身体{
边界：0；
填充：0；
保证金：0；
填充顶部：60px；
}
#标题{
位置：绝对位置；
排名：0；
高度：60px；
宽度：100%；
}
#包装纸{
身高：100%；
宽度：100%；
}

很棒的一个。。。现在我已经停止使用%he。。。除如下所示的主容器外：

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

我在所有已知的浏览器中进行了测试，效果良好。使用这种方法有什么缺点吗？

如果您不想使用绝对定位和所有的jazz，下面是我喜欢使用的修复方法：

您的html：

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

在本例中，您可以识别不同的区域：

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>


#分隔容器{
宽度：100%；
身高：100%；
}
#分母{
位置：绝对位置；
左：0px；
顶部：0px；
右：0px；
高度：28px；
背景颜色：蓝色；
}
#分区内容区{
位置：绝对位置；
左：0px；
顶部：30px；
右：0px；
底部：30px；
}
#左上角{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：200px；
底部：0px；
背景色：红色；
}
#divContentCenter{
位置：绝对位置；
顶部：0px；
左：200px；
底部：0px；
右：200px；
背景颜色：黄色；
}
#divContentRight{
位置：绝对位置；
顶部：0px；
右：0px；
底部：0px；
宽度：200px；
背景色：红色；
}
#分页脚{
位置：绝对位置；
高度：28px；
左：0px；
底部：0px；
右：0px；
背景颜色：蓝色；
}
顶部
左边
居中
正确的
底部

在CSS3中，您可以使用

height: calc(100% - 60px);

我还没有看到这样的帖子，但我想我应该把它发布出来

<div class="main">
<header>Header</header>
<div class="content">Content</div>

这是一张工作票

注意：我不知道浏览器的兼容性是什么。我只是在玩弄其他解决方案，这似乎很有效

你可以做一些类似于身高的事情：计算（100%-nPx）；例如高度：计算（100%-70px）

确保在使用较少时

height: ~calc(100% - 60px);

否则less将无法正确编译它

该站点仅与IE 7兼容。当我使用高度：100%，顶部：60px；我仍然有一个滚动条。我可以向下滚动60px。不指定高度，使用顶部和底部，让浏览器计算高度。但我希望我的页面的最大高度为100%减去60px；如果内容大于此值，我希望使用overflow:scroll在div中显示滚动条；对于滚动条，在包装器内部添加一个div，使其完全填充并溢出：scroll；注意，由于IE7中的错误，这可能仍然失败。如果无法使其工作，请使用JavaScript。我知道，你不喜欢它，但把它和一周的工作和奇怪的虫子做比较。我可以举个例子。我不明白我发布了我的想法，但我不能让它这么早/这么晚工作。也许如果我多睡一会儿，它在FF中有效，但我没有；我不能让它在IE7下工作。我只看到“标题”代码：标题左侧右侧您是否触发了标准兼容模式？我会在我的回复中添加一个示例页面。如果你需要把这些div放在页面的中间或者其他地方，只要把它们放在容器div中，并设置<代码>位置：容器上的相对< /代码>。然后把容器放在页面上你喜欢的任何地方。比如，如果我想要两个高度分别为40%和60%的div，那么内部div，内部#left呢？有没有具体的原因来解释为什么px被指定为0值参数？我认为这不符合预期。第一个

#页眉应该是页边距顶部：-60px。其次，height:100%表示高度将是父元素高度的100%，不包括边距、填充和边框。根据您的滚动设置，这将导致滚动条出现或内容被剪切。请确保“-”号前后都有空格。Firefox在“-”号之前需要有空格。
<div class="main">
<header>Header</header>
<div class="content">Content</div>

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

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

height: ~calc(100% - 60px);