我有一个网站与以下结构:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。
我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?
我有一个网站与以下结构:
<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%的含义。的确令人沮丧,但这是最简单的方法。
其他回答
这道题的题目和内容有点矛盾。标题说的是父div,但问题让它听起来像你想要两个兄弟div(导航和内容)是相同的高度。
你(a)希望导航和内容都是主高度的100%,还是(b)希望导航和内容是相同的高度?
我假设(b)……如果是这样的话,我不认为你将能够做到这一点,因为你目前的页面结构(至少,不是纯CSS和没有脚本)。你可能需要这样做:
<main div>
<content div>
<navigation div></div>
</div>
</div>
并将内容div设置为左侧空白,无论导航窗格的宽度是多少。这样,内容的内容就在导航栏的右边,你可以将导航栏的高度设置为内容高度的100%。
编辑:我完全是在我的头脑中做的,但你可能还需要将导航div的左侧空白设置为负值,或将它的绝对左侧设置为0,以将它推回到最左边。问题是,有很多方法可以实现这一点,但并不是所有的方法都能与所有浏览器兼容。
这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。
html,body {
height:100%;
}
这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧,但这是最简单的方法。
我有同样的问题,它的工作基于Hakam Fostok的答案,我已经创建了一个小例子,在某些情况下,它可能不需要添加显示:flex;而弯曲方向:圆柱;在父容器上
.row {
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: solid 1px #6c757d;
padding: 10px;
}
.card {
background-color: #a0a0a0;
height: 100%;
}
JSFiddle
2021年的读者:
试试这个:
.parent {
position: relative;
display: flex; // And you will probably need this too.
flex-direction: row; // or column.
}
.child {
position: absolute;
top: 0;
bottom: 0;
align-self: center; // And you will probably need this too.
}
以下是我正在做的事情:
将display: grid添加到父节点