网页放大之后右边的背景变成白色

Question

网页放大之后右边的背景变成白色

发布于
2018-12-01

问题：网页放大之后，滚动条滑到最右侧，背景全是白色的

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>小米商城 - 小米 MIX 3、小米 8、红米 6 Pro 、小米电视官方网站</title>
  <link rel="shortcut icon" href="https://www.mi.com/favicon.ico" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <!-- 顶部 -->
  <div class="topbar">
    <!-- 顶部容器 -->
    <div class="container">
      <!-- 导航 -->
      <div class="topbar-nav">
        <a href="#">小米商城</a> <span>|</span>
        <a href="#">MIUI</a><span>|</span>
        <a href="#">IoT</a><span>|</span>
        <a href="#">云服务</a><span>|</span>
        <a href="#">金融</a> <span>|</span>
        <a href="#">有品</a><span>|</span>
        <a href="#">小爱开放平台</a><span>|</span>
        <a href="#">政企服务</a><span>|</span>
        <a href="#">下载 app</a> <span>|</span>
        <a href="#">Select Region</a><span>|</span>
      </div>
      <!-- 导航 Over -->

      <!-- 购物车 -->
      <div class="topbar-cart">
        <a href="#">购物车<span>(0)</span></a>
      </div>
      <!-- 购物车 Over -->

      <!-- 消息信息 -->
      <div class="topbar-info">
        <a href="#">登录</a><span>|</span>
        <a href="#">注册</a><span>|</span>
        <a href="#" class="sep">消息通知</a><span>|</span>
      </div>
      <!-- 消息信息 Over -->
    </div>
    <!-- 顶部容器 Over -->
  </div>
  <!-- 顶部  Over -->
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  height: 8000px;
}
a {
  text-decoration: none;
}

.topbar {
  background: #333333;
}

.container {
  width: 1226px;
  /* 居中 */
  margin: 0 auto;
}

.container::before,
.container::after {
  content: "";
  display: table;
}

.container::after {
  clear: both;
}

.topbar a {
  color: #b0b0b0;
  font-size: 12px;
}

.topbar a:hover {
  color: white;
}

.topbar-nav {
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 0px;
}

.topbar-nav span {
  font-size: 12px;
  color: #424242;
  font-family: sans-serif;
  margin: 0.5em;
}

.topbar-info,
.topbar-cart {
  float: right;
}

.topbar-cart a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 120px;
  background-color: #424242;
}

.topbar-cart a:hover {
  color: #ff6700;
  background-color: #fff;
}

.topbar-cart span {
  font-size: 12px;
  margin-left: -4px;
}

.topbar-info a {
  float: left;
  padding: 0px 5px;
  height: 40px;
  line-height: 40px;
}

.topbar-info {
  margin-right: 15px;
}

.topbar-info span {
  float: left;
  font-family: sans-serif;
  color: #424242;
  height: 40px;
  line-height: 40px;
}

.topbar-info .sep {
  padding: 0 10px;
}

css html

html5

阅读 2.8k

1 个回答

得票最新

攻城狮Lee丶

2.8k3833

发布于
2018-12-01

✓ 已被采纳

.container{background:#333333}

撰写回答