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

Question

我希望我的第一个div“面板-1”采取的全部宽度和屏幕高度。我已经试着从三天内解决这个问题。

我试过height :100% & width:100的父母。position:relative在剖面上，position:absolute在div上。我尝试了堆栈溢出的各种其他解决方案。但没人帮上忙。

我创造了一把小提琴

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%的元素也会缩放到该大小。

这样做的方法应该是灵活的布局。

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>

​

Answer 2

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

Answer 3

尝尝这个

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