html 如何使正文和页眉占据全宽?

ajsxfq5m  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(100)

你好,我想我的标题所有的宽度,但当我调整我的屏幕的宽度,我的身体和标题不采取所有的宽度。
第一个
你好,我想我的标题所有的宽度,但当我调整我的屏幕的宽度,我的身体和标题不采取所有的宽度。

body{

    width: 100%;
    height: 100%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: relative;
    background-image: linear-gradient(to bottom, #0f2862, #3f2764, #5f2461, #792259, #8d264d, #89274d, #85294e, #812a4e, #632954, #422952, #232547, #091f36);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;

}



header{
position: absolute;
top: 0;
height: 70px;
width: 100%;

    display: flex;
    justify-content: flex-end;
    align-items: center;

}

@media screen and (max-width:500px) {
body {
display: grid;
grid-template-rows: 70px 100% ;
}

    header{
        width: 100%;
        display: grid;
        grid-template-columns: 65% 35%;
        align-items: center;
    }

}

在全屏中,标题处于绝对位置,当低于500px时,他得到了显示网格

l3zydbqr

l3zydbqr1#

高度:100vh
宽度:100vw
这将占用整个屏幕。

相关问题