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

Question

我正在尝试创建这样的布局:

我的问题是我不太熟悉“position”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