Question

在问我的问题时我会更具体，但我不知道要解决的问题虽然有问题，但是如下：我一直在处理的代码都很好而且jollie但是某些东西的宽度略大于我的页面，它创建了一个我不想要的滚动条。

现在在你去之前“嘿，这可能只是一个错字而你在某个地方写错了”很好，但事实并非如此。我已经检查了一百万次，我唯一能解决的是它与body_margin div＆amp; amp;屏幕img。

我的代码：

/*/ Font Styling /*/

a:link {
  color: #000;
  font-family: Courier New;
  text-decoration: none;
}
a:visited {
  color: #000;
  font-family: Courier New;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
/*/ Page Elements /*/

html,
body {
  margin: 0px;
  padding: 0px;
  background-color: #222;
}
#navbar_margin {
  width: 100vw;
  background-color: #FCFCFC;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-style: none;
  border-bottom-style: solid;
  border-color: #555;
  border-width: 2px;
  display: table;
  table-layout: fixed;
  position: fixed;
  top: 0px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  z-index: 2;
}
.navbar {
  width: 90vw;
  margin-left: 5vw;
  margin-right: 5vw;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
}
.navbar>li {
  display: table-cell;
  text-align: center;
  font-size: 2vmax;
}
.screen-img {
  height: 100%;
  width: 100vw;
  position: relative;
  border-style: none;
  border-bottom-style: solid;
  border-color: #222;
  border-width: 2.5px;
  z-index: 1;
}
#body_margin {
  width: 100vw;
  position: relative;
  border-style: none;
  border-top-style: solid;
  border-color: #222;
  border-width: 7.5px;
  background-color: #FFF;
  z-index: 3;
}
#content {
  width: 90vw;
  height: 100vh;
  margin-top: 2vw;
  margin-left: 5vw;
  margin-right: 5vw;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="Code/Css/style.css">
  <title>Homepage</title>
</head>

<body>
  <div id="navbar_margin">
    <ul class="navbar">
      <li id="nav_li"><a href="#home" id="nav_a"><b>Home</b></a>
      </li>
      <li id="nav_li"><a href="#news" id="nav_a">News</a>
      </li>
      <li id="nav_li"><a href="#logo" id="nav_a">LOGO</a>
      </li>
      <li id="nav_li"><a href="#contact" id="nav_a">Contact</a>
      </li>
      <li id="nav_li"><a href="#about" id="nav_a">About</a>
      </li>
    </ul>
  </div>
  <img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" class="screen-img">
  <div id="body_margin">
    <div id="content">
      <h1>Homepage</h1>
      <p>
        Welcome to my homepage, hope you like it.
      </p>
    </div>
  </div>
</body>

</html>

（注意：我将我的图像src编辑为我在google上找到的图像作为替代品）感谢您的阅读

Answer 1

如果将图像宽度设置为100vw并为其指定边框，则该边框将添加到图像的宽度。删除边框或将边框设置为1vw，图像宽度设置为98vw - 然后你将有100vw总数，因为98 + 1左+ 1右。

Answer 2

在您的正文标记中使用overflow-x:hidden;，然后您就无法看到溢出。无论是那个还是调整有问题的元素的大小！

Answer 3

您的问题是由垂直滚动条引起的，因为它的宽度包含在vw单位而不是百分比单位中，您可以通过将width: 100%替换为#navbar_margin中的.screen-img来解决这个问题。 #body_margin规则，对于display: block您不需要指定宽度，因为带有1<=T<=200 0≤A≤B<2^32的元素（默认值，如果没有提供）默认采用所有可用宽度

有人能帮助我弄清楚我的css宽度困境吗？

3 个答案: