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

How to make a div height and width equal to screen width and height?

我想让我的第一个 div "panel-1" 占据屏幕的全部宽度和高度。 我从3天开始就在努力破解这个问题

我在 parent 上尝试了 height :100% & width:100。然后 position:relative 部分和 position:absolute 部分 div。我尝试了各种其他关于堆栈溢出的解决方案。但是 none 有所帮助。

我创建了一个 fiddle 在:-

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 的新手。我真的尝试自己解决它。但是失败了。

您可以使用 width: 100vw;height: 100vh 来精确匹配 screen/viewport 尺寸。

试试这个

**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;
}

设置为:

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

您 运行 遇到的问题是,% 大小与最后一个偏移父项(正文或父链中的下一个 relative/absolute/fixed 元素)有关。 由于您的偏移父级正在使用全屏高度,因此使用 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; 占据屏幕的其余部分 space。然后将使用 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>

设置这个:

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