我有一个网站与以下结构:
<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的高度相同,无论哪个页面被加载?
当前回答
对于父节点:
display: flex;
您应该添加一些前缀,例如http://css-tricks.com/using-flexbox/。
正如@Adam Garner所指出的,align-items:拉伸;不需要。它的用法也适用于父母,而不是孩子。如果你想定义儿童拉伸,你使用align-self。
.parent { 背景:红色; 填充:10 px; 显示:flex; } .other-child { 宽度:100 px; 背景:黄色; 身高:150 px; 填充:.5rem; } .child { 宽度:100 px; 背景:蓝色; } < div class = "父" > < div class = "另一个孩子“> 仅用于拉伸父节点 < / div > < div class = "孩子" > < / div > < / div >
其他回答
我有同样的问题,它的工作基于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
要做到这一点,最简单的方法就是假装。《A List Apart》多年来对此进行了广泛的报道,比如Dan Cederholm 2004年的一篇文章。
我通常是这样做的:
<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
<div id="navigation" style="float:left;width:190px;padding-right:10px;">
<!-- Navigation -->
</div>
<div id="content" style="float:left;width:750px;">
<!-- Content -->
</div>
</div>
您可以通过将#container包装在另一个div中,将标题div嵌入为#container的兄弟,并将边缘和宽度样式移动到父容器中,轻松地在此设计中添加标题。此外,CSS应该移动到一个单独的文件,而不是保持内联等等。最后,clearfix类可以在positioniseverything上找到。
将display: grid添加到父节点
这段代码非常适合我
<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>
基于本文中描述的方法,我创建了.Less dynamic解决方案:
Html:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
少:
/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;
/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;
#container3 {
float: left;
width: 100%;
overflow: hidden;
background-color: red;
position: relative;
#container2 {
float: left;
width: 100%;
position: relative;
background-color: yellow;
right: @col3Width;
#container1 {
float: left;
width: 100%;
position: relative;
right: @col2Width;
background-color: green;
#col1 {
float: left;
width: @col1Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding;
overflow: hidden;
}
.col2 {
float: left;
width: @col2Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 2;
overflow: hidden;
}
#col3 {
float: left;
width: @col3Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 4;
overflow: hidden;
}
}
}
}