Question

我在论坛上搜索了答案，但没有找到可以应用于我的问题的答案。我希望我的.main-content（文章文字和图片）在移动屏幕上占据全屏宽度，而不会炫耀.sidebar和.ad。

<!DOCTYPE html>
<html lang="en">
    <head>
            <title>Demo</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="HandheldFriendly" content="true">
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet" href="normalize.css">
    </head> 
    <body>
            <div class="wrapper">   
                <header class="main-head">The Header</header>
                <nav class="main-nav">
                    <ul>
                        <li><a href="index.html">Nav 1</a></li>
                        <li><a href="nav2.html">Nav 2</a></li>
                        <li><a href="nav3.html">Nav 3</a></li>
                    </ul>
                </nav>
                <article class="content">
                            <h1 class="h1">Main article area</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus neque mi, suscipit molestie tellus sollicitudin eu. Praesent bibendum lorem at lacus luctus dignissim. Phasellus non volutpat est. Duis sed venenatis arcu, sed accumsan elit. Morbi luctus odio in pellentesque rutrum. Nunc suscipit enim tortor, vel mattis ligula semper a. Mauris at lacinia leo. Aenean luctus elit eget dolor dignissim cursus. Aliquam vulputate ut tellus sed volutpat.
                            Nam consequat arcu id nunc gravida dictum. Mauris mattis vitae metus nec commodo. Vestibulum malesuada mattis ex, sit amet aliquam augue placerat eget. Fusce finibus ullamcorper tortor, vel tempus diam cursus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet turpis diam. In semper lacinia nunc. Fusce risus sapien, sodales vitae pellentesque in, luctus id libero. Nunc ante velit, volutpat vitae dignissim vel, maximus eu lorem. Donec non fermentum nisl. Praesent vitae accumsan nisi, eu porta diam.</p>
                            <br>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus neque mi, suscipit molestie tellus sollicitudin eu. Praesent bibendum lorem at lacus luctus dignissim. Phasellus non volutpat est. Duis sed venenatis arcu, sed accumsan elit. Morbi luctus odio in pellentesque rutrum. Nunc suscipit enim tortor, vel mattis ligula semper a. Mauris at lacinia leo. Aenean luctus elit eget dolor dignissim cursus. Aliquam vulputate ut tellus sed volutpat.
                            Nam consequat arcu id nunc gravida dictum. Mauris mattis vitae metus nec commodo. Vestibulum malesuada mattis ex, sit amet aliquam augue placerat eget. Fusce finibus ullamcorper tortor, vel tempus diam cursus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet turpis diam. In semper lacinia nunc. Fusce risus sapien, sodales vitae pellentesque in, luctus id libero. Nunc ante velit, volutpat vitae dignissim vel, maximus eu lorem. Donec non fermentum nisl. Praesent vitae accumsan nisi, eu porta diam.</p>
                            <img src="image.webp" alt="Dummy" class="responsive">
                </article>
                <aside class="side">Sidebar</aside>
                <div class="ad">Advertising</div>
                <footer class="main-footer">The footer</footer>
            </div>       
    </body>
</html>

.wrapper {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    height: 100vh;
    grid-template-areas: 
      "header  header    header"
      "nav     nav       nav"
      "sidebar article   ad"
      "footer  footer    footer";
}
body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 100%;
}
.main-head {
    grid-area: header;
    background-color: teal;
    background-color: red !important;
}
.content {
    grid-area: article;
    width: 100%;
    background-color: orange;
    background-color: white !important;
}
.main-nav {
    grid-area: nav;
    background-color: lightblue;
    background-color: red !important;
    top: 0;
    width: 100%;
    position: sticky;
    z-index: 9999; 
}
.side {
    grid-area: sidebar;
    background-color: tomato;
    background-color: white !important;
}
.ad {
    grid-area: ad;
    background-color: lightgreen;
    background-color: white !important;
}
.main-footer {
    grid-area: footer;
    background-color: ghostwhite;
}
li {
    list-style-type: none;
    margin: 0;
    padding: 1rem;
}
a {
    text-decoration: none;
    color: black;
}
ul { 
    display: flex;
    padding: 0;
    margin: 0;
    }
.main-head, .content, .side, .ad, .main-footer {
    padding: 1rem;
}
.responsive {
    max-width: 100%;
    height: auto;
}
.h1 {
    font-size: 48px;
}
a:hover {
    color: white;
}
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

预先感谢您，如果我的代码有问题，请随时提出建议。

Answer 1

由于您已在.wrapper类中应用了display：grid，因此本文的宽度不完整。 CSS网格布局模块提供了具有行和列的基于网格的布局系统。要使文章全宽，请在响应中应用.wrapper {display：block}。希望有帮助！

@media screen and (max-width: 767px){ .wrapper{display: block;} }

使主要内容在手机屏幕上全屏显示

1 个答案: