Question

这个问题与其他一些问题非常接近，但我还没有找到确切的答案。我正在尝试自学CSS并制作一个简单的博客页面。

到目前为止，我有5个div元素标题，包装器，主要内容，侧边栏和页脚。我试图将标题放在顶部，底部的页脚位于其间的包装。在包装器中我想要主要内容和侧栏。侧边栏和主要内容都需要使用包装div来缩放高度。包装div的最小高度为70％。问题是我几乎所有这些都可以接受内部div缩放部分。无论我尝试什么，我都无法通过内容扩展侧边栏。我尝试过在网上找到的所有东西，但没有成功。代码如下：

CSS

html, body {
    height: 100%;
}

#wrapper { 
    min-height: 70%;
    width:100%;
}

#sidebar {
    width:200px;
    float: right;
    border-style: solid;
    border-width: medium;
}

#content { 
    overflow: hidden;
    border-style: solid;
    border-width: medium;
}

#header { 
    height:100px; 
    border-style: solid;
    border-width: medium;
}

#footer {   
    height:100px;
    border-style: solid;
    border-width: medium;
}

和HTML

<!DOCTYPE html>
<html>
<head>

    <link href="./css/style.css?v=<?=time();?>" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="wrapper">
        <div id="sidebar">
            sidebar
        </div>
        <div id="content">
            content
            <br>
            <br>
            <br>
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</body>
</html>

正如我所说，我正在学习这一点，所以请放轻松。这是我第一次尝试使用CSS。

我的代码是http://thediycookbook.com/

Answer 1

将display: flex添加到#wrapper以匹配其子级的高度，并将width: calc(100% - 200px);添加到#content以将其宽度扩展到右边框。

http://codepen.io/anon/pen/ONYKdg

Answer 2

#wrapper { 
    min-height: 70%;
    width:100%;
    display:flex;
}

#sidebar {
    width:200px;
    float: left;
    border-style: solid;
    border-width: medium;
    width:19%;
}

#content { 
    overflow: hidden;
    border-style: solid;
    border-width: medium;
    float:left;
    width:80%
}

如何在min-height的另一个div内将两个div元素缩放在一起？

2 个答案: