Question

如何创建一个占用所有屏幕空间减去其边距的Layout-Container？我尝试将calc函数与vh（calc（100vh-2em））结合使用无效。如果没有javascript，有没有一种优雅的方法呢？

同样适用于调整侧边栏的高度，因此它不会在容器上伸展。

谢谢。

＆＃13;

@charset "UTF-8";
body {
	padding: 0em;
	margin: 0em;
	background-color: white;
	height: 100%;
}

header {padding-bottom:2em;border-bottom:1px dashed white;}


#container{margin:2em; background-color:blue;min-height:100vh; height:100%; }

#sidemenu {
	opacity:0;
	float: left;
	position: fixed;
	width: 15%;
	background-color: green;
	height: 100%;
	overflow: scroll;
	margin-right: 1em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	-o-transition: opacity .2s ease-in-out;
	-ms-transition: opacity .2s ease-in-out;
	-moz-transition: opacity .2s ease-in-out;
	-webkit-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;


}

#sidemenu:hover {opacity:1; }

aside {
	line-height: 150%;
}

svg { display:block; margin:2em auto;}

aside ul {
	list-style: none;
	top: 10px;
	left: 0px;
	margin-left: 0px;
	overflow: scroll;
	padding-left: 1em;
}
aside p {
}
aside ul>ul>li {
	font-size: 0.8em;
	color: white;
}
aside a {
	color: black;
}
aside h1 {
	color: white;
	font-weight: bold;
	padding-left: 1em;
	margin-left: 0em;
	font-size: 1em;
}
main {
	float: left;
	width: 43%;
	position: relative;
	margin-left: 18%;
	margin-right: 1%;
	display: block;
	background-color:red;
	padding:2em;
}

titel {
	vertical-align:middle;
	text-align: left;
	display: block;
	color: rgba(0,0,0,1);
	margin: 0;
	padding: 0;
	font-family: "Century Schoolbook L", "Times New Roman", serif;
	background-color: red;
	font-size: 5em;
}
.bigger {
	text-shadow: 1px 1px 4px #FFF;
	color: black;
	
	
}
h2 {
	text-align: left;
	font-size: 40px;
	padding-bottom: 5px;
	border-bottom: 1px solid white;
	color: white;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.col h2 {
	color: #FFF;
}
#elcuerpo {
}
.koerper:hover {
	background-color: green;
	transition: background-color 1s ease-in-out;
}
#tips li {
	margin-bottom: 1em;
}
s
.rules:hover {
	transition: background-color 1s ease-in-out;
	background-color: white;
}
#sectionside {
	
	overflow: scroll;
	padding-left: 1em;
	right: 5em;
	position: absolute;
	float: right;
	width: 15%;
	background-color: rgba(0,0,0,0.05);
	color: white;
	margin: 0px 0px 0px 0px;
	height: 100%;}
	
#sectionside ul {
	list-style: none;
	
}
#sectionside h2 {color:white; font-size:0.5em;}

#sectionside li {padding-bottom:2em; font-size:1.5em; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; display:block; margin:0 auto; }
.titel:hover {
	background-color: orange;
}
.intro {
	margin-top:0em;
	padding-top:0em;
	font-size:4em;
	color: white;
	text-align: left;
	text-shadow: 2px 0 #000000;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>A Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<aside id="sidemenu">
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="white"  class="logo"/>
  </svg>
  <ul>
    <li><a href="#Sone">Section One</a></li>
    <li><a href="#Stwo">Sectino Two</a></li>
    <li><a>Section Three</a></li>
    <li><a>Section IV</a></li>
    <li><a>Section V</a></li>
    <li><a>Section V</a></li>
    <ul>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
      <li>Subsection</li>
    </ul>
    <li> <a>Section VI</a></li>
    <li>Section VI</li>
  </ul>
</aside>
<main>
  <header>
    <titel>HTML &amp; CSS</titel>
  </header>
  <section id="section one">
    <h2>&nbsp;</h2>
    <p>Lorem Ipsum</p>
  </section>
  <div id="sectionone">
    <h2>Display: Inline</h2>
    <p> Display Inline will not break the Layout, it can push other elements away horizontally, but not vertically. It also can not take height or width values. 
  </div>
  <h2>Display: Inline-Block</h2>
  <p>An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a width and height which will be respected.</p>
</main>
<section id="sectionside">
  <h2>Rules</h2>
  <ul>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
  </ul>
</section>
<div style="clear:both;"></div>
</container>
</body>
</html>

＆＃13;

Answer 1

Calc，就像你尝试过的那样，是正确的方法。然而，经过一些轻微的调整。并且4em因为你的边距是两边的2em。：

width:calc(100vw - 4em);
height:calc(100vh - 4em);

jsfiddle我在这里使用4.1em所以我可以设置一个边框，以便更容易看到：）

使div拉伸整个屏幕减去其边距

1 个答案: