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

debugcn 发表于 Dev

安吉特

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

我试过height :100%&width:100在父母身上。然后position:relative在 section 和position:absolutediv 上。我在堆栈溢出方面尝试了各种其他解决方案。但没有一个帮助。

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

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

贝利安

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

要走的路将是一个 flex 布局。

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;. 然后将使用将条目缩放到.content容器的高度height:100%;。

页脚也可以是此设置的一部分，将其放置在.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。