个人中心
gpt4 book ai didi

html - 制作一个 div 拉伸(stretch)整个屏幕减去它的边距

转载 作者：太空宇宙 更新时间：2023-11-04 08:58:13 24 4
gpt4 key购买 nike

如何创建一个占据所有屏幕区域减去边距的布局容器？我尝试将 calc 函数与 vh (calc(100vh-2em)) 结合使用，但无济于事。有没有一种不用 javascript 的优雅方式来做到这一点？

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

谢谢。

@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;
}
<!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>

最佳答案

Calc，就像您尝试过的那样，是正确的选择。然而，有一些轻微的调整。 4em，因为你的边距在两边都是 2em。:

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

jsfiddle我在这里使用了 4.1em，这样我就可以有一个边框，这样更容易看到:)

关于html - 制作一个 div 拉伸(stretch)整个屏幕减去它的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42964279/

24 4 0
文章推荐： html - 相对 block div 高于内容 - 无法解释的空白
文章推荐： linux - 根据另一个文件的值从一个文件中提取行 - LINUX
文章推荐： linux - 抑制来自 bash 脚本的控制台错误
文章推荐： html - 两行导航栏以正确的顺序折叠
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com