指定的div作为兄弟DIV

的容器高度减去100％的高度我有下面的布局的div指定的div作为兄弟DIV

<html style="height:100%"> 
<body style="height:100%"> 
    <div id="divBody" style="height:100%;width:1000px"> 
     <div id="divHeader" style="height:30px"></div> 
     <div id="divContent" style="height:100%"> 
      <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div> 
      <div id="divRight" style="width:800px"></div> 
     </div> 
    <div> 
</body> 
</html>

我的问题是，如何divContent拥有的身体100％的高度。我需要做的是占据divBody的整个高度减去divHeader的高度。所以我设置divContent的高度为auto：

<html style="height:100%"> 
<body style="height:100%"> 
    <div id="divBody" style="height:100%;width:1000px"> 
     <div id="divHeader" style="height:30px"></div> 
     <div id="divContent" style="height:auto"> 
      <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div> 
      <div id="divRight" style="width:800px"></div> 
     </div> 
    <div> 
</body> 
</html>

现在divContent的身高是正确的，它是divBody的100％减去divHeader的高度，但现在divLeft的高度不填100％它的父（ divContent）。我怎样才能在这里得到两全其美的呢？

来源

2012-05-15 Jeremy

我会使用jQuery的css方法。 –

将其设置为100％高度的目的是什么？仅仅是展示不同的背景？要启用滚动？圆角？ –

因为从Web应用程序的角度来看，如果应用程序包含整个窗口，则应用程序的整体外观更加合理，只是包含内容的一部分。 – Jeremy

您应该继续使用百分比，而不是使用标题像素的固定量。标题和内容的宽度应该是100％，但高度是“自动”，因此它实际上会根据您正在使用的正文div中的实际需要进行调整。

关于到div的左侧和右侧，两者都应该设置为高度100％我想

来源

2012-05-15 22:23:07 Sebas

确认，左右高度为100％是可以的......但是，正如塞巴斯蒂安所说的，使用百分比。 – Vladimir

我已经将标题和内容高度设置为自动，没有变化，它仍然不会导致divLeft和divRight填充整个高度。 – Jeremy

如果所有你关心的是两列和固定头部高度的高度，有一个CSS黑客工具，可以帮助你做到这一点。

考虑这个HTML：

<html style="height:100%"> 
<body style="height:100%"> 
    <div id="divBody"> 
     <div id="divHeader">Header</div> 
     <div id="divContent"> 
      <div id="divLeft">Left</div> 
      <div id="divRight">Right</div> 
     </div> 
    </div> 
</body> 
</html>

下面CSS：

#divBody { 
    height: 100%; 
    width: 1000px; 
    overflow: hidden; 
} 

#divHeader { 
    height:30px; 
    background-color: Yellow; 
} 

#divContent { 
    height:auto; 
    background-color: Aqua; 
    position: relative; 
} 

#divLeft {   
    height:100%; 
    float:left; 
    width:200px; 
    border-left:1px solid black; 
    background-color: Azure; 

    padding-bottom: 30000px; 
    margin-bottom: -30000px; 
} 

#divRight { 
    height: 100%; 
    width:800px; 
    background-color: Pink; 

    padding-bottom: 30000px; 
    margin-bottom: -30000px; 
}

这里的jsfiddle与插图：http://jsfiddle.net/3rDNC/

来源

2012-05-15 22:40:02

哇，这似乎工作，但我不明白填充和边距实际上在做什么。这对跨浏览器支持如何？ – Jeremy

这是一个老问题，但这里是我的使用calc（100％ - 30px）减去标题大小的两分钱：

#divContent { 
    height: calc(100% - 30px); 
    background-color: Aqua; 
    position: relative; 
}

来源

2017-09-12 15:56:24 Rachid

指定的div作为兄弟DIV

回答

相关问题