Question

好的，CSS大师。这对你来说很简单。我想在我的主要内容区域左侧有一个侧边栏。我希望侧边栏占据屏幕的30％，内容占70％。但是，我希望侧边栏占据可用高度的100％。我有

<div id="main">
  <div id="side">
    <%= render "layouts/sidebar" %>
  </div>
  <div id="contentArea"><%= yield %></div>
</div>

我认为将父DIV设置为＆＃34; display：flex;＆＃34;会让一切都正确......

#main {
        display: flex;
        width: 100%;
        background-color: green;
}

#side {
        background-color: #e0e0e0;
        width: 30%;
        display: inline-block;
        float: left;
        height: 100%;
}

#contentArea {
        text-align: center;
        width: 70%;
        display: inline-block;
}

但是现在，我的侧边栏的高度仅等于其中的内容。如何100％完成所有工作？

Answer 1

在你的结构中，'main'是父div，这意味着如果你将'100％of everything'设置为child div'side'并且这个div不是绝对或固定的位置，'main'也是100％。因此，您可以使用相对长度，例如height：100vh。

jsfiddle

但是你可以设置为固定的div位置：当你在contentArea中滚动时它会有所帮助，但是所有时间的div div都会在高度为100vh的左侧。

jsfiddle

提示：如果使用flex，则可以在不浮动的情况下进行操作（例如，对齐内容）。检查一下：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

问题是您在height上指定了100% #side。具有讽刺意味的是，这实际上阻止列占据整个垂直空间，因为它在容器的高度处限制。由于#main没有指定的高度，因此在height: 100%上设置#side会将其约束为内容（文本）的高度。

只需删除此选项即可使列扩展以占据整个垂直空间：

＆＃13;

#main {
  display: flex;
  width: 100%;
  background-color: green;
}

#side {
  background-color: #e0e0e0;
  width: 30%;
  display: inline-block;
  float: left;
  /*height: 100%;*/
}

#contentArea {
  text-align: center;
  width: 70%;
  display: inline-block;
}

＆＃13;

<div id="main">
  <div id="side">
    Side
  </div>
  <div id="contentArea">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut interdum quam. Integer nec tincidunt erat, in scelerisque turpis. Pellentesque interdum turpis eu ante gravida, a auctor lacus pulvinar. Maecenas elementum massa ac felis gravida lobortis
    vitae eget nisi. Donec erat turpis, condimentum et ipsum in, tincidunt fringilla quam. Nam est dui, porttitor eget nisl sit amet, mollis varius dui. Suspendisse dui mauris, tincidunt vitae blandit ac, consectetur sed ex. Sed bibendum felis ex, id
    euismod odio euismod ac. Praesent viverra arcu quis arcu condimentum, eget varius elit suscipit. Donec tempus, justo vel iaculis vehicula, risus magna varius ex, vitae mattis elit turpis ac magna. Fusce porta tempus erat vel ultricies. Suspendisse
    vel erat blandit, semper dui sed, consequat urna. Pellentesque ultrices pellentesque feugiat. Donec sit amet turpis in orci accumsan blandit. In tincidunt erat sed tristique sagittis. Duis ultrices lacus quis vestibulum venenatis. Maecenas et risus
    quam. Quisque semper purus id mauris gravida dictum. Cras tellus augue, sollicitudin ac maximus eget, porta elementum elit. Fusce vulputate consectetur dapibus. Praesent semper augue lacus, vel laoreet tellus ultricies fermentum. Phasellus vestibulum
    fringilla purus ut malesuada.
  </div>
</div>

＆＃13;

希望这有帮助！：）

Answer 3

使用：#side{height: 100vh;}（vh =视口高度），并移除显示flex，以便每个div可以具有不相等的高度。链接到jsfiddle https://jsfiddle.net/gcoh62o6/5/

为什么不显示：flex允许我的侧边栏占用100％的可用DIV高度？

3 个答案: