Question

我正在尝试设置网页，但由于元素的高度，我会发疯。特别是，我想要的布局是：

在顶部有一个固定高度（例如150px）和100％宽度的标题。
在标题下，我需要两列。左列具有固定宽度（例如40px），右列具有与窗口一样大的宽度。两列都有最小高度（例如600px，两列相同），但如果有足够的空间，它们必须填满所有窗口直到页脚。
页面底部的页脚。它被放置在列下面（不得重叠！）并且具有固定的高度（例如50px）。

我尝试了几种模式，但尚未找到工作模式。有时我最终会在页面上叠加页脚，有时列不会填充所有可用空间。我认为主要问题是最小高度要求，因为如果没有它，问题就相当简单了。我知道CSS属性min-height，但仍然无法找到方法。

这是我的代码（没有正常工作，右栏变得太大，页脚甚至都没有显示）。

header{
    height: 40px;
    width: 100%;
    background-color: darkgoldenrod;
    text-align: center;
}

footer{
    background-color: grey;
    height: 50px;
    width: 100%;
    text-align: center;
}

#container{
    position: relative;
    width: 100%;
    min-height: 200px;
    background-color: red;
    margin-bottom: -100px;
    padding-bottom: 100px;
}

#toolbar{
    background-color: white;
    position: absolute;
    left: 0;
    width: 80px;
    height: 100%;
}

#drawbox{
    background-color: yellow;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 80px;
}

<!DOCTYPE html>
<html>
<head>
<title>BLOCKS</title>
<link rel="stylesheet" type="text/css" href="blocchi.css">
</head>
    
<body>
<header>
    <h2>HEADER</h3>
</header>

<div id="container">
    <aside id="toolbar">TOOLBAR</aside>
    <div id="drawbox">DRAWBOX</div>
</div>  
<footer>
    <p>FOOTER</p>
</footer>
</body>
</html>

你能帮帮我吗？提前致谢！

编辑：如果可能的话，我想要一个不涉及CSS3属性和异国情调的答案，因为我正在努力学习简单易用的东西。我很确定解决方案是“div”，“position”，“height”和类似东西的组合！

Answer 1

使用flexbox。让外部容器（标题，主区域，页脚）成为max-height: 100vh;的弹性列。然后将主区域设置为最小高度为600px的普通flex布局或其他，并设置主要内容区域（侧边栏旁边）以通过flex-grow: 1;增加所有可用空间。然后，当您向主区域添加内容时，它将一直增长到100vh并向下推页脚，然后页脚将位于页面底部，您可以使主区域（侧边栏和主内容）滚动通过overflow-y: auto;

＆＃13;

*{margin:0;padding:0;box-sizing:border-box;}
header,footer {
  height: 50px;
  background: black;
  color: white;
}
.flex {
  display: flex;
}
.vert {
  flex-direction: column;
}
.container {
  max-height: 100vh;
}
section {
  min-height: 200px;
}
aside {
  background: #ccc;
  width: 100px;
}
main {
  flex-grow: 1;
  background: #eee;
}
.scroll {
  overflow-y: auto;
}

＆＃13;

<div class="flex vert container">
  <header>header</header>
  <section class="flex">
    <aside class="scroll"><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p></aside>
    <main class="scroll"><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p></main>
  </section>
  <footer>footer</footer>
</div>

＆＃13;

Answer 2

我也建议使用flexbox，只与粘性页脚不同而不是滚动溢出：

底部没有内容溢出的页脚：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: calc(100% - 50px);
  display: flex;
  flex-flow: column wrap;
}
header {
  height: 40px;
  background-color: darkgoldenrod;
  text-align: center;
}
#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex: 1;
  background-color: red;
}
#toolbar {
  background-color: white;
  width: 80px;
}
#drawbox {
  background-color: yellow;
  flex: 1;
}
footer {
  background-color: grey;
  height: 50px;
  width: 100%;
  text-align: center;
}

<div class="wrapper">
  <header>
    <h2>HEADER</h2>
  </header>
  <div id="container">
    <aside id="toolbar">TOOLBAR</aside>
    <div id="drawbox">DRAWBOX</div>
  </div>
</div>
<footer>
  <p>FOOTER</p>
</footer>

页脚压缩内容溢出：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: calc(100% - 50px);
  display: flex;
  flex-flow: column wrap;
}
header {
  height: 40px;
  background-color: darkgoldenrod;
  text-align: center;
}
#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex: 1;
  background-color: red;
}
#toolbar {
  background-color: white;
  width: 80px;
}
#drawbox {
  background-color: yellow;
  flex: 1;
}
footer {
  background-color: grey;
  height: 50px;
  width: 100%;
  text-align: center;
}

<div class="wrapper">
  <header>
    <h2>HEADER</h2>
  </header>
  <div id="container">
    <aside id="toolbar">TOOLBAR</aside>
    <div id="drawbox">DRAWBOX
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
    </div>
  </div>
</div>
<footer>
  <p>FOOTER</p>
</footer>

全尺寸div，固定大小的页眉和页脚之间的最小高度

2 个答案: