如何使div高度和宽度等于屏幕宽度和高度?

Question

我希望我的第一个div"panel-1">采用屏幕的整个宽度和高度。 我一直试图从 3 天开始解决这个问题。

我尝试了父母的height :100%和width:100。然后在部分position:relative，在div 上position:absolute。我在堆栈溢出上尝试了各种其他解决方案。但没有人帮助。

我在以下位置创建了一个小提琴：-

https://jsfiddle.net/81uo3zfc/

<div id="navigation_panel">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="technologies.html">Technologies</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<section>
<div id="panel-1">
<p class="lazyText">Hey!</p>
<p class="lazyText">Lorem ipsum dolor </p>
<p class="colorTransition">sit amet consectetur.</p>
<a class="nextBtn" id="nextBtn-1" href="#panel-2">Let's Go <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-2">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" id="nextBtn-2" href="#panel-3">Roger That <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-3">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" name="nextBtn-3" data="tech" href="javascript:;">Tech Person <img class="emoji" src="images/tech.svg" alt="Tech Icon"></a>
<a class="nextBtn" name="nextBtn-3" data="nontech" href="javascript:;" style="margin-left: 10px;">Non Tech Person <img class="emoji" src="images/non_tech.svg" alt="Non Tech Icon"></a>
</div>
</section>

请帮忙。我是CSS的新手。我真的尝试过自己解决它。但失败了。

Answer 1

您遇到的问题是，%大小与最后一个偏移父元素(主体或父链中的下一个相对/绝对/固定元素(有关。 由于偏移父级使用的是全屏高度，因此使用100%的元素也将缩放到该大小。

要走的路是灵活的布局。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

将 flex 布局设置为导航的父元素，将方向设置为列并将其大小调整为屏幕高度。通过添加flex-grow:0; flex-shrink:0，导航将保持静态大小。

内容将显示在额外的.content容器中，使用flex-grow:1;占用屏幕空间的其余部分。然后，这些条目将使用height:100%;缩放到.content容器的高度。

页脚也可以是此设置的一部分，方法是将其放置在.sizer容器中并设置flex-grow:0; flex-shrink:0

html,body{
height: 100%;
margin:0;
}
.sizer {
display:flex;
flex-direction:column;
height: 100%;
}
.content {
flex-grow:1;
overflow: scroll;
}
#navigation_panel
{
background-color: #15598f;
padding: 2%;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
}
#navigation_panel>ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation_panel>ul>li
{
display: inline;
margin : 2%;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#navigation_panel>ul>li>a{
text-decoration: none;
color: #ffffff;
}
section
{
width: 70%;
margin-left: auto;
margin-right: auto;
height: 90%;
height:100%;
padding: 20px 0;
box-sizing: border-box;
}
#panel-1,#panel-2,#panel-3,#panel-4,#panel-5,#panel-6
{
border: 4px solid #27a9e0;
position: relative;
padding: 4%;
height: 100%;
box-sizing: border-box;
}
#panel-1 p,#panel-2 p:nth-child(1),#panel-3 p:nth-child(1),#panel-4 p:nth-child(1),#panel-5 p:nth-child(1),#panel-6 p:nth-child(1)
{
font-size: 40px;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
}
.normal{
font-size: 24px;
font-family: 'Open Sans', sans-serif;
}
.normal-small{
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.nextBtn
{
background-color: #15598f;
text-decoration: none;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
color: #ffffff;
}
.emoji
{
width: 25px;
margin-left: 5px;
vertical-align: inherit;
transition: 0.5s;
}
.emoji:hover
{
transform: rotate(-30deg);
}
.AdditionalList>li>a
{
color : #1b8ab9;
border-bottom: 1px solid #27a9e066;
text-decoration: none;
margin: auto;
}
.AdditionalList>li
{
margin-bottom: 20px;
}
footer{
margin: 5% 2% 0% 0%;
}
.third{
width: 33%;
padding: 10px;
background-color: #242f4a;
color: #ffffff;
}
/*Technologies Css*/
.techlist>li{
font-size: 34px;
font-family: 'Open Sans', sans-serif;
}

<div class="sizer">
<div id="navigation_panel">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="technologies.html">Technologies</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="content">
<section>
<div id="panel-1">
<p class="lazyText">Hey!</p>
<p class="lazyText">Lorem ipsum dolor </p>
<p class="colorTransition">sit amet consectetur.</p>
<a class="nextBtn" id="nextBtn-1" href="#panel-2">Let's Go <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-2">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" id="nextBtn-2" href="#panel-3">Roger That <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-3">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" name="nextBtn-3" data="tech"  href="javascript:;">Tech Person <img class="emoji" src="images/tech.svg" alt="Tech Icon"></a>
<a class="nextBtn" name="nextBtn-3"  data="nontech"  href="javascript:;" style="margin-left: 10px;">Non Tech Person <img class="emoji" src="images/non_tech.svg" alt="Non Tech Icon"></a>
</div>
</section>
</div>
</div>

Answer 2

您可以使用width: 100vw;和height: 100vh来完全匹配屏幕/视口大小。

Answer 3

设置这个：

#panel-1{
width: 100vw;
height:100vh;
}

Answer 4

试试这个

**css**
html,body{
/*height: 100%;*/
margin:0;
/*border:1px solid black;*/
}
#navigation_panel
{
background-color: #15598f;
padding: 2%;
margin: 0;
}
#navigation_panel>ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation_panel>ul>li
{
display: inline;
margin : 2%;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#navigation_panel>ul>li>a{
text-decoration: none;
color: #ffffff;
}
section
{
width:100%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
margin-bottom: 40px;
height: 100%;
}
#panel-1,#panel-2,#panel-3,#panel-4,#panel-5,#panel-6
{
border: 4px solid #27a9e0;
position: relative;
padding: 4%;
height: 90%;
max-height: 600px !important;
}
#panel-1{
height: calc(100vh - 176px);
max-height: inherit !important;
}
#panel-1 p,#panel-2 p:nth-child(1),#panel-3 p:nth-child(1),#panel-4 p:nth-child(1),#panel-5 p:nth-child(1),#panel-6 p:nth-child(1)
{
font-size: 40px;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
}
.normal{
font-size: 24px;
font-family: 'Open Sans', sans-serif;
}
.normal-small{
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.nextBtn
{
background-color: #15598f;
text-decoration: none;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
color: #ffffff;
}

.emoji
{
width: 25px;
margin-left: 5px;
vertical-align: inherit;
transition: 0.5s;
}
.emoji:hover
{
transform: rotate(-30deg);
}

.AdditionalList>li>a
{
color : #1b8ab9;
border-bottom: 1px solid #27a9e066;
text-decoration: none;
margin: auto;
}
.AdditionalList>li
{
margin-bottom: 20px;
}

footer{
margin: 5% 2% 0% 0%;
}

.third{
width: 33%;
padding: 10px;
background-color: #242f4a;
color: #ffffff;
}

/*Technologies Css*/
.techlist>li{
font-size: 34px;
font-family: 'Open Sans', sans-serif;
}

Answer 5

设置：

#panel-1{
position:absolute; 
top:0px; 
left:0px; 
bottom:0px; 
right:0px;
}