Question

我的布局非常经典，但是很遗憾，我无法弄清楚这是怎么回事。

我有一个固定的边栏（15％的宽度）和内容（85％的宽度）。我将所有容器的高度都设置为100％。

<html>
<body>
 <did id="content">
   <div id="primary" class="content-area">
    <main id="main" class="site-main">  
    <div class="content">
        <section class="category_intro">

我使用flexbox，为什么我给所有容器100％的高度是因为如果我不这样做，这些部分的高度将很小。我首先需要有一个全幅图像，然后是一个高度为50％的区域，然后是另一个区域为全高度，等等。

我为所有容器提供了100％的拉力但是我面临的问题是，在某些页面中，.content容器中的各个部分已溢出eadchother ..而我不明白为什么。当我检查元素时，我可以看到指针没有覆盖所有容器

我给我的部分添加了背景色，但是正如您在图像中看到的那样，它并没有填充整个部分。我试着清除这两种情况，自动溢出，一个接一个地删除所有容器的100％height属性，停止使用flexbox ..但是由于固定了侧边栏，我认为这是问题所在。使用flexbox固定内容的侧边栏？

Answer 1

如今，构建布局的最佳方法是使用CSS grid。在您的2个主要元素的父元素上应用display:grid;并使用grid-template-columns: 15% 85%;将为您完成一切。

body {
  height: 100vh;
  
  display: grid;
  grid-template-columns: 15% 85%;
}

aside {
  background-color: blue;
}

main {
  background-color: green;
}

<body>
  <aside></aside>
  <main></main>
</body>

带有固定边栏的html布局

1 个答案: