Question

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

我在父级上尝试过height :100%和width:100。然后在节上使用position:relative，在div上使用position:absolute。我在堆栈溢出上尝试了其他各种解决方案。但没有一个帮助。

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

<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

设置此：

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

Answer 2

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

可行的方法是采用弹性版式。

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布局设置为导航的父元素，将方向设置为column并将其大小设置为屏幕高度。通过添加%，导航将保持静态大小。

内容将显示在附加的100%容器中，其中使用flex-grow:0; flex-shrink:0会占用屏幕的其余空间。然后，将使用.content将条目缩放到flex-grow:1;容器的高度。

通过将页脚放置在.content容器中并设置height:100%;

，该页脚也可以成为此设置的一部分

.sizer

flex-grow:0; flex-shrink:0

Answer 3

您可以使用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;
}

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

5 个答案: