创建一个全高度的元素（HTML / CSS） [英] Make an element with full Height (HTML/CSS)

问题描述

我搜索了很多，发现了很多方法来做到这一点。但每个都有一些缺点，我不能忽略。

如果您访问了 w3school 网站，我确定您会注意到左侧的侧边栏导航器。

虽然第一眼看起来很简单，但不是！

有了一个漂亮的技巧我做了这样的：

  * {box-sizing：border-box; } body {font-size：35px; padding：0; margin：0;显示：block; } .container {overflow：hidden;背景：#eee; } .row {position：relative; background-color：＃555;左：25％; } .row :: after {content：;清除：显示：block; } header，footer {text-align：left; padding：30px; margin：0; } header h1 {margin：0; padding：0; } nav {position：relative; / * position：fixed; * / overflow-y：scroll; top：0;右：25％;高度：100％; / * background-color：#eee; * /} ul {/ * overflow：scroll; * /} section {position：relative; padding：0 80px;右：25％; } .col-3 {width：25％; float：left;} .col-9 {width：75％; float：left;}   < header>< h1> HELL！< h1>< / header& < div class =container> < div class =row> < nav class =col-3> < ul> < li>第一< / li> < li>第二< / li> < li>第三< / li> < / ul> < / nav> < section class =col-9> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Quisque sed ex turpis。 Cras luctus nibh lectus，in ullamcorper ex temporal eleinend。 Nulla bibendum，eros a posteriorat vestibulum，orci massa fermentum quam，sed commodo nunc ex vitae nisl。 aliquam ullamcorper interdum est nec tincidunt。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Quisque sed ex turpis。 Cras luctus nibh lectus，in ullamcorper ex temporal eleinend。 Nulla bibendum，eros a posteriorat vestibulum，orci massa fermentum quam，sed commodo nunc ex vitae nisl。 Aliquam ullamcorper interdum est nec tincidunt。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Quisque sed ex turpis。 Cras luctus nibh lectus，in ullamcorper ex temporal eleinend。 Nulla bibendum，eros a posteriorat vestibulum，orci massa fermentum quam，sed commodo nunc ex vitae nisl。 Aliquam ullamcorper interdum est nec tincidunt。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Quisque sed ex turpis。 Cras luctus nibh lectus，in ullamcorper ex temporal eleinend。 Nulla bibendum，eros a posteriorat vestibulum，orci massa fermentum quam，sed commodo nunc ex vitae nisl。 Aliquam ullamcorper interdum est nec tincidunt。 < / p>< / section> < / div> < / div> < footer>< h3> HELL！< h3>< / footer>  

但你可以看到，导航列表的滚动条仍然符合它的内容大小，这是这个方法的问题。

虚假列方法很酷，但我不喜欢在我的设计中使用 图片。

正如我说的，我也看到了一些其他的方法，但都有 问题。

）

所以如果你有一个特殊方法或可以使用（类似 w3school ）的东西 请分享。

解决方案

这里有两个结构，它们都是动态的并填充视口高度，第一个使用 flex ，

  html {height：100％;} body {margin：0; min-height：100％;显示：flex; flex-direction：column;} header {flex：0;背景：白色; padding：10px;} main {flex：1; display：flex;} aside {flex：0; padding：10px;背景：黑色; color：white;} section {flex：1; padding：10px; text-align：left; background：gray;} footer {flex：0; padding：10px;背景：白色;}  

 < header& header>< main> < aside> Aside< / aside> < section>第< / section>部分< / main>< footer> Footer< / footer>  

，第二个使用 display：table

  html {height：100％;} body {margin：0; min-height：100％; display：table; width：100％;}。row {display：table-row;} cell {display：table-cell;} header div {height：0;背景：白色; padding：10px;} main {height：100％;} aside {width：0; padding：10px;背景：黑色; color：white;} section {width：100％; padding：10px; text-align：left; background：gray;} footer div {height：0; padding：10px; background：white;}  

 < header class = > < div class =cell> Header< / div>< / header>< main class =row> < aside class =cell> Aside< / aside> < section class =cell> Section< / section>< / main>< footer class =row> < div class =cell> Footer< / div>< / footer>  

I searched a lot and found lots of ways to doing this. but each of them some cons that i couldn't ignore.

If you visited w3school website, I'm sure you'd notice the sidebar navigator in the left. I like that and wanted to create something like it.

Though at the first glance it's pretty simple, But it's not!!

With a beautiful trick i did something like this:

  * {
  box-sizing: border-box;
  }
  body {
      font-size: 35px;
      padding: 0;
      margin: 0;
      display: block;
  }
  .container {
      overflow: hidden;
      background: #eee;
  }
  .row {
      position: relative;
      background-color: #555;
      left: 25%;
  }
  .row::after {
      content: "";
      clear: both;
      display: block;
  }
  header, footer {
      text-align: left;
      padding: 30px;
      margin: 0;
  }

  header h1 {
      margin: 0;
      padding: 0;
  }
  nav {
      position: relative;
      /*position: fixed;*/
      overflow-y: scroll;
      top: 0;
      right: 25%;
      height: 100%;
      /*background-color: #eee;*/
  }
  ul {
      /*overflow: scroll;*/
  }
  section{
      position: relative;
      padding: 0 80px;
      right: 25%;
  }
  .col-3 {width: 25%;float: left;}
  .col-9 {width: 75%;float: left;}

<header><h1>HELL!<h1></header>
	<div class="container">
		<div class="row">
			<nav class="col-3">
				<ul>
					<li>first</li>
					<li>second</li>
					<li>third</li>
					
				</ul>
			</nav>
			<section class="col-9">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
			</p></section>
		</div>
	</div>
	<footer><h3>HELL!<h3></footer>

But as you can see, scrollbar of the navigation list still matches the size of content of it, and that's the problem with this method.

Faux Column method is cool, but i don't like use images in my design.

As i said i saw a few other methods too, but all had problems.

(and of course i don't want to use JavaScript or anything. just CSS)

So if you have an special method or something that i could use (something like w3school) Please share.

Thanks in advance.

解决方案

Here is 2 structures where both are dynamic and fill the viewport height, the first use flex,

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  flex: 0;
  background: white;
  padding: 10px;
}
main {
  flex: 1;
  display: flex;
}
aside {
  flex: 0;
  padding: 10px;
  background: black;
  color: white;
}
section {
  flex: 1;
  padding: 10px;
  text-align: left;
  background: gray;
}
footer {
  flex: 0;
  padding: 10px;
  background: white;
}

<header>Header</header>
<main>
  <aside>Aside</aside>
  <section>Section</section>
</main>
<footer>Footer</footer>

and the second use display: table

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
header div {
  height: 0;
  background: white;
  padding: 10px;
}
main {
  height: 100%;
}
aside {
  width: 0;
  padding: 10px;
  background: black;
  color: white;
}
section {
  width: 100%;
  padding: 10px;
  text-align: left;
  background: gray;
}
footer div {
  height: 0;
  padding: 10px;
  background: white;
}

<header class="row">
  <div class="cell">
    Header
  </div>
</header>
<main class="row">
  <aside class="cell">Aside</aside>
  <section class="cell">Section</section>
</main>
<footer class="row">
    <div class="cell">
  Footer
  </div>
</footer>

这篇关于创建一个全高度的元素（HTML / CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！