缩小窗口时如何摆脱水平滚动条？

问题描述

使用下面的HTML和CSS，您会发现，缩小到189px的宽度后，网站会得到一个水平滚动条，而不是缩小以适合浏览器窗口。我已经检查了我的代码，但似乎无法弄清为什么会这样。请记住，我是新手，所以我很可能已经忽略了一些东西。

此外，如果允许的话，我还有一个额外的问题：我想缩小菜单高度，但这似乎是不可能的。你会怎么做？

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title></title>
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <h1>Title</h1>
      </div>
      <div class="menu">
<a href="#">about</a> <br>
<a href="#">contact</a> <br>
<a href="#">donate</a> <br>
      </div>

      <div class="pic">
<img src="roshi.jpg" alt="roshi">
      </div>
      <div class="content">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="content2">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="footer">
Footer
      </div>
    </div>
  </body>
</html>

html body {
  margin: 0 auto;
  font-family: "Raleway",sans-serif;

}

.wrapper {
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
  "header"
  "menu"
  "pic"
  "content"
  "content2"
  "footer";
}


.header {
  grid-area: header;
  background-color: lightgrey;
}

.header h1 {
  margin-left: 0;
  padding-left: 0;
}
.menu {
  grid-area: menu;
  padding: 0;
  line-height: 2;

}
.menu a {
  text-decoration: none;

}
.menu a:link {
  color: black;
}
.pic {
  grid-area: pic;

}

img {

  width: 100%;
  height: auto;
}
.content {
  grid-area: content;

}
.content2 {
  grid-area: content2;
}
.footer {
  grid-area: footer;
  background-color: lightgrey;

}

.wrapper > * {
  margin: 0px 30px;
}
.header,.footer {

  padding: 0px 30px;
}


@media screen and (min-width: 500px) {
.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 1fr 1fr;
grid-template-areas:
"header header"
"menu menu"
"pic pic"
"content content2"
"footer footer";
}
.menu {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}
.menu a {
  padding-right: 10px;

}
}

JSFiddle链接：https://jsfiddle.net/tzrqf5np/

解决方法

我根据需要修复了CSS。您确实应该开始确保正确设置间距。它在HTML和CSS中没有直接影响，但可以帮助阅读，对于其他语言也是一种很好的做法。在许多语言中，如果代码有效与否，间距会有所不同。但是，使用Visual Studio Code这样的程序可以更轻松地进行特别阅读，优点是您可以看到哪些结束标记属于哪个开始标记。请尝试为我练习“我的小帕达万”：P

好的，格式更改是媒体查询：

@media only screen
  and ...
  and ... {
    body {
      random-code: xy;
    }
}

如果您使用媒体查询访问屏幕，请使用only screen。即使它有效，也几乎总是把它当作养成正确习惯的好习惯。然后用and...换一行您想使用的内容。您可以通过这种方式组合许多规则，例如min-width和max-width，orientation: landscape/portrait屏幕格式...

然后您使用了：grid-template-rows: 1fr 1fr;我将其切换为grid-template-columns: 1fr 1fr;，并添加了grid-auto-rows: auto;和tada：它的工作原理。菜单变小了，就像您想要的。

接下来，图片的宽度为自动。这样就不应该创建水平滚动条。宽度为100％时，它将为顶部的边距和内边距添加100％，然后宽度比屏幕宽。

html body {
  margin: 0 auto;
  font-family: "Raleway",sans-serif;
}

.wrapper {
  margin: 0 auto;
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 10px;
  grid-template-areas:
  "header"
  "menu"
  "pic"
  "content"
  "content2"
  "footer";
}


.header {
  grid-area: header;
  background-color: lightgrey;
}

.header h1 {
  margin-left: 0;
  padding-left: 0;
}
.menu {
  grid-area: menu;
  padding: 0;

}
.menu a {
  text-decoration: none;
}

.menu a:link {
  color: black;
}

.pic {
  grid-area: pic;
}

img {
  width: 100%;
  height: auto;
}

.content {
  grid-area: content;
}

.content2 {
  grid-area: content2;
}

.footer {
  grid-area: footer;
  background-color: lightgrey;
}

.wrapper > * {
  margin: 0px 30px;
}

.header,.footer {
  padding: 0px 30px;
}

@media only screen 
  and (min-width: 500px) {
    .wrapper {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: auto;
      grid-template-areas:
        "header header"
        "menu menu"
        "pic pic"
        "content content2"
        "footer footer";
    }
    
    .menu {
      display: flex;
      flex-direction: row;
      margin-left: auto;
    }

    .menu a {
      padding-right: 10px;
    }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title></title>
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <h1>Title</h1>
      </div>
      <div class="menu">
        <a href="#">about</a><br>
        <a href="#">contact</a><br>
        <a href="#">donate</a>
      </div>
      <div class="pic">
        <img src="roshi.jpg" alt="roshi">
      </div>
      <div class="content">
        <h1>Article</h1>
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h1>Article</h1>
        <p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="content2">
        <h1>Article</h1>
        <p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

首先-据我所知-您的文档中只有文本这意味着实际上没有水平滚动条（我看不到图像-因此可能是图像溢出）

但是无论如何，您可以尝试将其添加到CSS文档的顶部：

body: {overflow-x: hidden;}

如果仍添加滚动条，则可以：

向@media添加Display: None（这会完全删除图像；））或
您将width: 100vw添加到图像

您应该尝试此操作，而不是破坏每个菜单项

HTML：

<div class="menu">
     <div class="menu-item">Contact</div>
     <div class="menu-item">Team</div>
     <div class="menu-item">About Us</div>
</div>

CSS：

.menu {
    display: flex;
}

.menu-item {
    margin-left: 30px;
}

您能解释一下“缩小菜单高度”的含义吗？您是说带有灰色背景的“标题”标题吗？

html scrollbar

缩小窗口时如何摆脱水平滚动条？

问题描述

解决方法

相关问答