我有一个网站与以下结构:

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

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

<div id="footer"></div>

导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。

我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?


当前回答

这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。

html,body {
    height:100%;
}

这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧,但这是最简单的方法。

其他回答

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

看看这个例子。

这段代码非常适合我

<html>
    <body style="display: flex;">
        <div style="position: absolute; width: 100%; height: 100%; background-color: aliceblue">
            <table style="width: 100%; height: 100%;">
               <tr>
                   <td style="width: 70%; background-color: green"></td>
                   <td style="background-color: red"></td>
               </tr>
            </table>
       </div>
   </body>

这道题的题目和内容有点矛盾。标题说的是父div,但问题让它听起来像你想要两个兄弟div(导航和内容)是相同的高度。

你(a)希望导航和内容都是主高度的100%,还是(b)希望导航和内容是相同的高度?

我假设(b)……如果是这样的话,我不认为你将能够做到这一点,因为你目前的页面结构(至少,不是纯CSS和没有脚本)。你可能需要这样做:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

并将内容div设置为左侧空白,无论导航窗格的宽度是多少。这样,内容的内容就在导航栏的右边,你可以将导航栏的高度设置为内容高度的100%。

编辑:我完全是在我的头脑中做的,但你可能还需要将导航div的左侧空白设置为负值,或将它的绝对左侧设置为0,以将它推回到最左边。问题是,有很多方法可以实现这一点,但并不是所有的方法都能与所有浏览器兼容。

如果你不介意导航div在意外的短内容div事件中被剪辑,至少有一个简单的方法:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

除此之外,还有假柱技术。