如何创建这个简单的布局？

Question

我试图创建这样的布局：

我的问题是，我并不熟悉＆＃34;位置＆＃34; css标签。所以起初我是这样定位左右侧边栏：

overflow: hidden;
position:fixed;
top: 90px;
width: 260px !important;
bottom: 0;
left: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding-bottom: 50px;

只有它们之间的区别在于，我使用了另一个而不是左边。我不想指定高度的像素数。但是当我使用高度100％作为主要内容它没有外包装并且它的高度也比导航栏更大。

嗯，简而言之，我的问题是：如何创建这个全屏布局？我在图纸中制作了水槽，只是为了显示3列。我的页面没有排水沟。

Answer 1

我创建了图片中的所有内容，请注意内容没有响应，如果需要响应，请转到bootstrap。

注意：请以全屏模式查看答案！

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div:not(.wrapper) {
  border: 1px solid black;
}

.topbar {
  position: absolute;
  top: 10px;
  right: 1%;
  left: 1%;
  height: 200px;
}

.left-nav {
  float: left;
  margin: 0 1%;
  width: 18%;
}

.right-nav {
  float: left;
  margin: 0 1%;
  width: 18%;
}

.main {
  float: left;
  margin: 0 1%;
  width: 78%;
}

.wrapper {
  display: flex;
  margin-top: 220px;
  margin-bottom: 10px;
}

<div class="topbar">
  topbar
</div>
<div class="wrapper">
  <div class="left-nav">
    left nav
  </div>
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt id tellus ut scelerisque. Nullam dapibus id orci ac congue. Nunc mattis dictum dui id euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lorem turpis,
    venenatis nec rutrum et, blandit ac risus. Integer non sem quam. Mauris dictum, nisl id sollicitudin eleifend, purus ligula hendrerit mi, vitae ornare neque arcu pellentesque quam. Suspendisse consequat interdum dolor, maximus elementum metus lobortis
    vitae. Phasellus interdum erat vitae imperdiet pharetra. Sed vestibulum tellus arcu, vel hendrerit nisl elementum ut. Quisque non finibus dolor, non convallis libero. Pellentesque feugiat metus nisl, vel laoreet ligula posuere eu. In in tincidunt
    mi. In pharetra fermentum risus, non elementum erat blandit vel. Sed at turpis sed turpis finibus auctor. Morbi condimentum congue eros, nec sodales ligula fringilla vel. Suspendisse a nibh at massa convallis suscipit. Vestibulum accumsan lacus a
    facilisis molestie. Ut efficitur sodales ipsum eget pulvinar. Suspendisse faucibus rhoncus odio, convallis lacinia metus fringilla ac. Donec tincidunt tellus quis diam pharetra pellentesque. Praesent a mollis diam, eu vestibulum libero. Quisque euismod
    bibendum nibh in tempor. Curabitur congue ut tellus a malesuada. Proin id vestibulum velit. Pellentesque quis elit quis nulla lobortis bibendum in vitae odio. Maecenas eu rhoncus lectus. Quisque aliquet metus id facilisis egestas. Nunc posuere, felis
    in commodo viverra, eros ipsum pulvinar neque, sit amet accumsan massa tellus varius magna. Quisque id risus pharetra, pulvinar ipsum ut, sodales sapien. Curabitur euismod odio quis lectus hendrerit fringilla. Sed lorem libero, euismod quis accumsan
    ac, aliquam in ligula. Integer imperdiet enim non sapien luctus, a iaculis lorem tempus. Morbi ut pulvinar quam. Vivamus sodales justo ac metus laoreet, a condimentum turpis ultricies. Fusce enim risus, volutpat nec tempus vel, efficitur eget eros.
    Integer ac augue ut arcu pulvinar rhoncus. Vivamus tellus dui, posuere eu gravida sed, tempor eget sem. Praesent efficitur diam eget neque rhoncus auctor. Praesent tincidunt mauris sit amet lectus cursus gravida. Cras condimentum vestibulum euismod.
    Donec sit amet tellus at enim volutpat egestas. Maecenas risus tellus, aliquam vel sodales at, sagittis id lacus. Fusce pellentesque erat nunc. Suspendisse id cursus mauris. Donec ac pellentesque nibh. Ut vulputate lacus nec justo maximus mollis a
    nec nisl. Aliquam lectus diam, interdum vitae tellus quis, lacinia varius elit. Nam vehicula feugiat condimentum. Pellentesque at magna aliquet, vehicula sapien non, tincidunt nisi. Fusce convallis, orci dignissim faucibus placerat, massa lacus bibendum
    orci, suscipit mattis enim nunc lacinia est. Cras ante sem, dictum at metus eu, sagittis cursus mi. Integer in purus convallis, consectetur eros et, pulvinar risus. Fusce molestie nibh et purus pulvinar, non volutpat quam efficitur. Nulla facilisis
    metus non ornare elementum. Donec mollis tempor neque, sit amet varius nibh egestas sed. Integer vel dolor fermentum, dignissim urna ac, condimentum lacus. Proin imperdiet venenatis orci, et placerat magna dignissim in. Aliquam lobortis scelerisque
    maximus. Pellentesque sit amet libero in leo volutpat dignissim at vitae ligula. Nullam et sem nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt id tellus ut scelerisque. Nullam dapibus id orci ac congue. Nunc mattis
    dictum dui id euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lorem turpis, venenatis nec rutrum et, blandit ac risus. Integer non sem quam. Mauris dictum, nisl id sollicitudin eleifend, purus ligula hendrerit mi, vitae
    ornare neque arcu pellentesque quam. Suspendisse consequat interdum dolor, maximus elementum metus lobortis vitae. Phasellus interdum erat vitae imperdiet pharetra. Sed vestibulum tellus arcu, vel hendrerit nisl elementum ut. Quisque non finibus dolor,
    non convallis libero. Pellentesque feugiat metus nisl, vel laoreet ligula posuere eu. In in tincidunt mi. In pharetra fermentum risus, non elementum erat blandit vel. Sed at turpis sed turpis finibus auctor. Morbi condimentum congue eros, nec sodales
    ligula fringilla vel. Suspendisse a nibh at massa convallis suscipit. Vestibulum accumsan lacus a facilisis molestie. Ut efficitur sodales ipsum eget pulvinar. Suspendisse faucibus rhoncus odio, convallis lacinia metus fringilla ac. Donec tincidunt
    tellus quis diam pharetra pellentesque. Praesent a mollis diam, eu vestibulum libero. Quisque euismod bibendum nibh in tempor. Curabitur congue ut tellus a malesuada. Proin id vestibulum velit. Pellentesque quis elit quis nulla lobortis bibendum in
    vitae odio. Maecenas eu rhoncus lectus. Quisque aliquet metus id facilisis egestas. Nunc posuere, felis in commodo viverra, eros ipsum pulvinar neque, sit amet accumsan massa tellus varius magna. Quisque id risus pharetra, pulvinar ipsum ut, sodales
    sapien. Curabitur euismod odio quis lectus hendrerit fringilla. Sed lorem libero, euismod quis accumsan ac, aliquam in ligula. Integer imperdiet enim non sapien luctus, a iaculis lorem tempus. Morbi ut pulvinar quam. Vivamus sodales justo ac metus
    laoreet, a condimentum turpis ultricies. Fusce enim risus, volutpat nec tempus vel, efficitur eget eros. Integer ac augue ut arcu pulvinar rhoncus. Vivamus tellus dui, posuere eu gravida sed, tempor eget sem. Praesent efficitur diam eget neque rhoncus
    auctor. Praesent tincidunt mauris sit amet lectus cursus gravida. Cras condimentum vestibulum euismod. Donec sit amet tellus at enim volutpat egestas. Maecenas risus tellus, aliquam vel sodales at, sagittis id lacus. Fusce pellentesque erat nunc.
    Suspendisse id cursus mauris. Donec ac pellentesque nibh. Ut vulputate lacus nec justo maximus mollis a nec nisl. Aliquam lectus diam, interdum vitae tellus quis, lacinia varius elit. Nam vehicula feugiat condimentum. Pellentesque at magna aliquet,
    vehicula sapien non, tincidunt nisi. Fusce convallis, orci dignissim faucibus placerat, massa lacus bibendum orci, suscipit mattis enim nunc lacinia est. Cras ante sem, dictum at metus eu, sagittis cursus mi. Integer in purus convallis, consectetur
    eros et, pulvinar risus. Fusce molestie nibh et purus pulvinar, non volutpat quam efficitur. Nulla facilisis metus non ornare elementum. Donec mollis tempor neque, sit amet varius nibh egestas sed. Integer vel dolor fermentum, dignissim urna ac, condimentum
    lacus. Proin imperdiet venenatis orci, et placerat magna dignissim in. Aliquam lobortis scelerisque maximus. Pellentesque sit amet libero in leo volutpat dignissim at vitae ligula. Nullam et sem nunc. Pellentesque at magna aliquet, vehicula sapien
    non, tincidunt nisi. Fusce convallis, orci dignissim faucibus placerat, massa lacus bibendum orci, suscipit mattis enim nunc lacinia est. Cras ante sem, dictum at metus eu, sagittis cursus mi. Integer in purus convallis, consectetur eros et, pulvinar
    risus. Fusce molestie nibh et purus pulvinar, non volutpat quam efficitur. Nulla facilisis metus non ornare elementum. Donec mollis tempor neque, sit amet varius nibh egestas sed. Integer vel dolor fermentum, dignissim urna ac, condimentum lacus.
    Proin imperdiet venenatis orci, et placerat magna dignissim in. Aliquam lobortis scelerisque maximus. Pellentesque sit amet libero in leo volutpat dignissim at vitae ligula. Nullam et sem nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aliquam tincidunt id tellus ut scelerisque. Nullam dapibus id orci ac congue. Nunc mattis dictum dui id euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lorem turpis, venenatis nec rutrum et, blandit ac risus. Integer
    non sem quam. Mauris dictum, nisl id sollicitudin eleifend, purus ligula hendrerit mi, vitae ornare neque arcu pellentesque quam. Suspendisse consequat interdum dolor, maximus elementum metus lobortis vitae. Phasellus interdum erat vitae imperdiet
    pharetra. Sed vestibulum tellus arcu, vel hendrerit nisl elementum ut. Quisque non finibus dolor, non convallis libero. Pellentesque feugiat metus nisl, vel laoreet ligula posuere eu. In in tincidunt mi. In pharetra fermentum risus, non elementum
    erat blandit vel. Sed at turpis sed turpis finibus auctor. Morbi condimentum congue eros, nec sodales ligula fringilla vel. Suspendisse a nibh at massa convallis suscipit. Vestibulum accumsan lacus a facilisis molestie. Ut efficitur sodales ipsum
    eget pulvinar. Suspendisse faucibus rhoncus odio, convallis lacinia metus fringilla ac. Donec tincidunt tellus quis diam pharetra pellentesque. Praesent a mollis diam, eu vestibulum libero. Quisque euismod bibendum nibh in tempor. Curabitur congue
    ut tellus a malesuada. Proin id vestibulum velit. Pellentesque quis elit quis nulla lobortis bibendum in vitae odio. Maecenas eu rhoncus lectus. Quisque aliquet metus id facilisis egestas. Nunc posuere, felis in commodo viverra, eros ipsum pulvinar
    neque, sit amet accumsan massa tellus varius magna. Quisque id risus pharetra, pulvinar ipsum ut, sodales sapien. Curabitur euismod odio quis lectus hendrerit fringilla. Sed lorem libero, euismod quis accumsan ac, aliquam in ligula. Integer imperdiet
    enim non sapien luctus, a iaculis lorem tempus. Morbi ut pulvinar quam. Vivamus sodales justo ac metus laoreet, a condimentum turpis ultricies. Fusce enim risus, volutpat nec tempus vel, efficitur eget eros. Integer ac augue ut arcu pulvinar rhoncus.
    Vivamus tellus dui, posuere eu gravida sed, tempor eget sem. Praesent efficitur diam eget neque rhoncus auctor. Praesent tincidunt mauris sit amet lectus cursus gravida. Cras condimentum vestibulum euismod. Donec sit amet tellus at enim volutpat egestas.
    Maecenas risus tellus, aliquam vel sodales at, sagittis id lacus. Fusce pellentesque erat nunc. Suspendisse id cursus mauris. Donec ac pellentesque nibh. Ut vulputate lacus nec justo maximus mollis a nec nisl. Aliquam lectus diam, interdum vitae tellus
    quis, lacinia varius elit. Nam vehicula feugiat condimentum. Pellentesque at magna aliquet, vehicula sapien non, tincidunt nisi. Fusce convallis, orci dignissim faucibus placerat, massa lacus bibendum orci, suscipit mattis enim nunc lacinia est. Cras
    ante sem, dictum at metus eu, sagittis cursus mi. Integer in purus convallis, consectetur eros et, pulvinar risus. Fusce molestie nibh et purus pulvinar, non volutpat quam efficitur. Nulla facilisis metus non ornare elementum. Donec mollis tempor
    neque, sit amet varius nibh egestas sed. Integer vel dolor fermentum, dignissim urna ac, condimentum lacus. Proin imperdiet venenatis orci, et placerat magna dignissim in. Aliquam lobortis scelerisque maximus. Pellentesque sit amet libero in leo volutpat
    dignissim at vitae ligula. Nullam et sem nunc. Pellentesque at magna aliquet, vehicula sapien non, tincidunt nisi. Fusce convallis, orci dignissim faucibus placerat, massa lacus bibendum orci, suscipit mattis enim nunc lacinia est. Cras ante sem,
    dictum at metus eu, sagittis cursus mi. Integer in purus convallis, consectetur eros et, pulvinar risus. Fusce molestie nibh et purus pulvinar, non volutpat quam efficitur. Nulla facilisis metus non ornare elementum. Donec mollis tempor neque, sit
    amet varius nibh egestas sed. Integer vel dolor fermentum, dignissim urna ac, condimentum lacus. Proin imperdiet venenatis orci, et placerat magna dignissim in. Aliquam lobortis scelerisque maximus. Pellentesque sit amet libero in leo volutpat dignissim
    at vitae ligula. Nullam et sem nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt id tellus ut scelerisque. Nullam dapibus id orci ac congue. Nunc mattis dictum dui id euismod. Interdum et malesuada fames ac ante ipsum
    primis in faucibus. Aliquam lorem turpis, venenatis nec rutrum et, blandit ac risus. Integer non sem quam. Mauris dictum, nisl id sollicitudin eleifend, purus ligula hendrerit mi, vitae ornare neque arcu pellentesque quam. Suspendisse consequat interdum
    dolor, maximus elementum metus lobortis vitae. Phasellus interdum erat vitae imperdiet pharetra. Sed vestibulum tellus arcu, vel hendrerit nisl elementum ut. Quisque non finibus dolor, non convallis libero. Pellentesque feugiat metus nisl, vel laoreet
    ligula posuere eu. In in tincidunt mi. In pharetra fermentum risus, non elementum erat blandit vel. Sed at turpis sed turpis finibus auctor. Morbi condimentum congue eros, nec sodales ligula fringilla vel. Suspendisse a nibh at massa convallis suscipit.
    Vestibulum accumsan lacus a facilisis molestie. Ut efficitur sodales ipsum eget pulvinar. Suspendisse faucibus rhoncus odio, convallis lacinia metus fringilla ac. Donec tincidunt tellus quis diam pharetra pellentesque. Praesent a mollis diam, eu vestibulum
    libero. Quisque euismod bibendum nibh in tempor. Curabitur congue ut tellus a malesuada. Proin id vestibulum velit. Pellentesque quis elit quis nulla lobortis bibendum in vitae odio. Maecenas eu rhoncus lectus. Quisque aliquet metus id facilisis egestas.
    Nunc posuere, felis in commodo viverra, eros ipsum pulvinar neque, sit amet accumsan massa tellus varius magna. Quisque id risus pharetra, pulvinar ipsum ut, sodales sapien. Curabitur euismod odio quis lectus hendrerit fringilla. Sed lorem libero,
    euismod quis accumsan ac, aliquam in ligula. Integer imperdiet enim non sapien luctus, a iaculis lorem tempus. Morbi ut pulvinar quam. Vivamus sodales justo ac metus laoreet, a condimentum turpis ultricies. Fusce enim risus, volutpat nec tempus vel,
    efficitur eget eros. Integer ac augue ut arcu pulvinar rhoncus. Vivamus tellus dui, posuere eu gravida sed, tempor eget sem. Praesent efficitur diam eget neque rhoncus auctor. Praesent tincidunt mauris sit amet lectus cursus gravida. Cras condimentum
    vestibulum euismod. Donec sit amet tellus at enim volutpat egestas. Maecenas risus tellus, aliquam vel sodales at, sagittis id lacus. Fusce pellentesque erat nunc. Suspendisse id cursus mauris. Donec ac pellentesque nibh. Ut vulputate lacus nec justo
    maximus mollis a nec nisl. Aliquam lectus diam, interdum vitae tellus quis, lacinia varius elit. Nam vehicula feugiat condimentum. Pellentesque at magna aliquet, vehicula sapien non, tincidunt nisi. Fusce convallis, orci dignissim faucibus placerat,
    massa lacus bibendum orci, suscipit mattis enim nunc lacinia est. Cras ante sem, dictum at metus eu, sagittis cursus mi. Integer in purus convallis, consectetur eros et, pulvinar risus. Fusce molestie nibh et purus pulvinar, non volutpat quam efficitur.
    Nulla facilisis metus non ornare elementum. Donec mollis tempor neque, sit amet varius nibh egestas sed. Integer vel dolor fermentum, dignissim urna ac, condimentum lacus. Proin imperdiet venenatis orci, et placerat magna dignissim in. Aliquam lobortis
    scelerisque maximus. Pellentesque sit amet libero in leo volutpat dignissim at vitae ligula. Nullam et sem nunc.
  </div>
  <div class="right-nav">
    right nav
  </div>
</div>

替代答案：

JSFiddle Demo

Answer 2

这是一个略微响应的解决方案： 的 HTML

<html>
  <body>
    <div id='page'>
      <div id='top'>
      </div>
      <div id='left'>
      </div>
      <div id='middle'>
      </div>
      <div id='right'>
      </div>
    </div>
  </body>
</html>

<强> CSS

body, html {
  margin: 0;
}
#page {
  width: 100%;
  height: 100%;
}
#top {
  position: absolute;
  height: 40px;
  width: 100%;
  top: 0px;
  background-color: yellow;
}
#left {
  position: absolute;
  top: 40px;
  width: 25%;
  height: 100%;
  background-color: green;
}
#middle {
  position: absolute;
  top: 40px;
  left: 25%;
  width: 50%;
  height: 100%;
  background-color: red;
}
#right {
  position: absolute;
  top: 40px;
  width: 25%;
  left: 75%;
  height: 100%;
  background-color: blue;
}

这就是它的样子： https://codepen.io/anon/pen/OxmGea?editors=1100

Answer 3

这只是一个快速的样本。你可以去做绝对的元素。这也是一种反应。祝你好运！

div {
  text-align: center;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.nav {
  width: 100%; 
  height: 15%;
  background: red;
}

.left {
  width: 15%;
  height: 85%;
  background: blue;
  left: 0;
  position: absolute;
}

.right {
  width: 15%;
  height: 85%;
  background: green;
  right: 0;
  position: absolute;
}

.middle {
  width: 70%;
  height: 85%;
  left: 15%;
  background: yellow;
  position: absolute;
}

<div class="wrapper">
  <div class="nav">Top nav</div>
  <div class="left">Left</div>
  <div class="middle">Content</div>
  <div class="right">Right</div>
</div>

Answer 4

使用CSS Grids可以轻松完成这项工作会让您感到惊讶。简而言之，CSS Grid就像Flexbox一样，但它可以在2d而不是1d中运行，非常适合以简单和干净的方式创建像你这样的2d布局。您可以阅读并了解CSS网格here和here。这完全值得！

我使用CSS网格重新创建了你想要的布局。代码如下：

HTML：

<div class="page">
  <div class="header">Header</div>
  <div class="nav">Left navigation</div>
  <div class="content">Content</div>
  <div class="side">Right navigation</div>
</div>

CSS：

html, body {
  padding: 0;
  margin: 0;
}

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content side"
  ;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 200px 1fr;
  grid-gap: 10px;
  height: 100vh;
  width: 100vw;
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
  overflow: auto;
}

.content {
  grid-area: content;
  overflow: auto;
}

.side {
  grid-area: side;
  overflow: auto;
}

.footer {
  grid-area: footer;
}

这就是全部。您可以在行动here中看到它。

在这个例子中，我为标题设置了200px的高度，为左右导航设置了300px的宽度。整个布局需要100％的视图宽度和100％的视图高度(vh)。所有布局块之间也有10px的间隙，但如果您愿意，可以将其设置为0。我还为溢出的内容设置了滚动条，如图片所示。这些滚动条仅在需要时显示，但如果您想要始终显示它们，请设置overflow-y: scroll。

祝你好运！