CSS：如何限制水平/垂直滚动？

时间：2016-07-04 17:48:42

标签： html css

详细

我为我的网站制作了一个div导航器，有4个向左浮动的菜单按钮，以及1个向右浮动的认证按钮。导航员的位置是相对的，所以它不会移动。

CODE 

body {
  background-color: #2B2B2B;
}
.main {
  position: relative;
  top: 0%;
  left: 0%;
  right: 0%;
  width: 101.6%;
  height: 10%;
  z-index: 1;
  min-height: 120px;
  max-height: 120px;
  background-color: rgba(26, 26, 26, 0.9);
}
.logo {
  display: block;
  float: left;
  top: 0%;
  left: 0%;
  right: 0%;
  /*background-image: url('images/logo.png');
	width: 150px;
	height: 155px;*/
  font-size: 32pt;
  color: white;
  margin-top: 3%;
  margin-left: 1%;
}
.menu {
  display: inline-block;
  position: relative;
  top: 0%;
  left: 0%;
  right: 0%;
  background-color: rgba(26, 26, 26, 0.9);
  height: 100%;
  width: 101%;
  border-style: solid;
  border-color: rgba(26, 26, 26, 0.9);
  border-radius: 0%;
  z-index: 1;
  max-height: 7%;
  max-width: 102.5%;
  min-height: 50px;
  min-width: 100%;
  overflow: hidden;
}
.Button1 {
  display: block;
  font-size: 10pt;
  float: left;
  right: 15%;
  left: 30%;
  top: 0%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  padding: 25px 2px 55px 2px;
  vertical-align: center;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
}
.Button1:hover {
  color: #C90205;
}
.Button2 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 10%;
  white-space: nowrap;
  color: white;
  width: 7%;
  margin-top: 0%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  vertical-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
}
.Button2:hover {
  color: #C90205;
}
.Button3 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
}
.Button3:hover {
  color: #C90205;
}
.Button4 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
}
.Button4:hover {
  color: #C90205;
}
.Button5 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
}
.Button5:hover {
  color: #C90205;
}
.Button6 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 8%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  font-family: sans-serif;
  height: 10%;
  width: 7%;
  text-align: center;
  height: 10%;
  text-align: center;
  padding: 28px 0px 55px 0px;
  text-align: center;
  line-height: 2px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
}
.Button6:hover {
  color: #C90205;
}
.signin {
  float: right;
  width: 114px;
  height: 42px;
  margin-top: 0.5%;
  margin-right: 1.9%;
  color: red;
}
.mainpage {
  height: 100%;
  width: 80%;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%
}
<div class="main">
  <a class="logo" href="/" style="text-decoration:none">My Website</a>
</div>

<div class="menu">
  <a class="Button1" href="/" style="text-decoration:none">Button 1</a>
  <a class="Button2" href="/" style="text-decoration:none">Button 2</a>
  <a class="Button3" href="/" style="text-decoration:none">Button 3</a>
  <a class="Button4" href="/" style="text-decoration:none">Button 4</a>
  <a class="Button5" href="/support" style="text-decoration:none">Button 5</a>
  <a class="Button5" href="/" style="text-decoration:none">Button 6</a>
  <a class="signin" href="/login" style="text-decoration:none">AuthButton</a>
</div>

<div class="mainpage"></div>
<!-- This is page under the navigator for placing the content, right now it's empty -->

Fiddle

问题

不幸的是，如果你看this，并尝试水平滚动，你会看到溢出，它会留在那里，即使我有底部内容容器mainpage div与{{ 1}} 100％和height 80％，当它根本没有任何东西时它仍然可以向下滚动。

如下所示，我尝试使用特定分辨率限制width和html，这无法解决我的问题。

body

问题

如何限制我的页面仅以特定分辨率滚动？

分辨率是否可以大于100％的值，以便它可以工作？

3 个答案:

答案 0 :(得分：1)

你的问题在这里：

.main {
  width: 101.6%;
}
.mainpage {
  height: 100%;
  width: 80%;
}

我调整了你的代码，将所有buttons类合并为一个。那里有无效/未使用的属性。

你需要修复上面提到的那些属性：

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background-color: #2B2B2B
}
.main {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 10%;
  min-height: 120px;
  max-height: 120px;
  background-color: rgba(26, 26, 26, 0.9)
}
.logo {
  float: left;
  top: 0;
  left: 0;
  right: 0;
  /*background-image: url('images/logo.png');
	width: 150px;
	height: 155px;*/
  font-size: 32pt;
  color: white;
  margin: 3% 0 0 1%
}
.menu {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(26, 26, 26, 0.9);
  border: solid rgba(26, 26, 26, 0.9);
  border-radius: 0;
  z-index: 1;
  min-height: 50px;
  min-width: 100%
}
.Button {
  font-size: 10pt;
  float: left;
  font-family: sans-serif;
  padding: 25px 2px 55px;
  border: solid rgba(0, 0, 0, 0.25);
  border-width: 0 1px;
  white-space: nowrap;
  color: white;
  width: 7%;
  text-align: center;
  line-height: 6px;
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
  text-decoration: none
}
.Button:hover {
  color: #C90205;
}
.signin {
  float: right;
  width: 114px;
  height: 42px;
  margin-top: 0.5%;
  margin-right: 1.9%;
  color: red;
}
.mainpage {
  height: calc(100% - 216px);
  width: 100%;
}
<div class="main">
  <a class="logo" href="/" style="text-decoration:none">My Website</a>
</div>

<div class="menu">
  <a class="Button b1" href="/">Button 1</a>
  <a class="Button b2" href="/">Button 2</a>
  <a class="Button b3" href="/">Button 3</a>
  <a class="Button b4" href="/">Button 4</a>
  <a class="Button b5" href="/support">Button 5</a>
  <a class="Button b6" href="/">Button 6</a>
  <a class="signin" href="/login">AuthButton</a>
</div>

<div class="mainpage"></div>
<!-- This is page under the navigator for placing the content, right now it's empty -->

答案 1 :(得分：0)

另一种使用较小CSS的方法可以在这里看到：https://jsfiddle.net/3125ygjf/3/

也许您还应该看看flexbox模型。在那里你不必关心绝对定位。容器获取display: flex; flex-direction: column;，然后您可以将标题，菜单和主菜放在那里。你只需要为main-div提供所需的高度并使其可滚动。就是这样。

*编辑：此外，所有按钮的宽度均为7％，即稍后更改文本时会出现问题。尽量避免使用这样的宽度值。

答案 2 :(得分：0)

你的代码有几个问题，我会列出尽可能多的注意事项：

    默认情况下，
  1. div元素的宽度为100％，因此您无需指定它。如果你试图使用超过100％的某种 hack 因为它不适合视口的整个x轴，那么你的代码就会出错。
  2. 一个类充当多个选择器，这意味着如果所有按钮都共享相同的CSS属性，则可以只使用一个类。
  3. 如果您使用相同的值定义max-height和min-height，为什么不使用height。
  4. body默认情况下在不同的浏览器中有一个边距，通常约为8px，因此您可以使用margin: 0删除它。
  5. 您的主要css属性应始终 您的供应商前缀，例如-webkit-，-moz-等。
  6. 当您在css属性中使用零时，无需指定px，pt，％或任何其他单位，因为0将始终计算为0px。

    7. JSFiddle

    CODE SNIPPET 

    body {
  background-color: #2B2B2B;
  margin: 0
}
.main {
  position: relative;
  height: 10%;
  z-index: 1;
  height: 120px;
  background-color: rgba(26, 26, 26, 0.9);
}
.logo {
  display: block;
  float: left;
  /*background-image: url('images/logo.png');
	width: 150px;
	height: 155px;*/
  font-size: 32pt;
  color: white;
  margin-top: 3%;
  margin-left: 1%;
}
.menu {
  position: relative;
  background-color: rgba(26, 26, 26, 0.9);
  height: 100%;
  border-style: solid;
  border-color: rgba(26, 26, 26, 0.9);
  border-radius: 0;
  z-index: 1;
  height: 50px;
  overflow: hidden;
}
.btn {
  font-size: 10pt;
  white-space: nowrap;
  color: white;
  float: left;
  margin-top: 0;
  width: 7%;
  font-family: sans-serif;
  padding: 25px 0 55px 0;
  vertical-align: center;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
}
.btn:hover {
  color: #C90205;
}
.signin {
  float: right;
  width: 114px;
  height: 42px;
  margin-top: 0.5%;
  margin-right: 1.9%;
  color: red;
}
.mainpage {
  height: 100%;
}
    <div class="main">
  <a class="logo" href="/" style="text-decoration:none">My Website</a>
</div>

<div class="menu">
  <a class="btn" href="/" style="text-decoration:none">Button 1</a>
  <a class="btn" href="/" style="text-decoration:none">Button 2</a>
  <a class="btn" href="/" style="text-decoration:none">Button 3</a>
  <a class="btn" href="/" style="text-decoration:none">Button 4</a>
  <a class="btn" href="/support" style="text-decoration:none">Button 5</a>
  <a class="btn" href="/" style="text-decoration:none">Button 6</a>
  <a class="signin" href="/login" style="text-decoration:none">AuthButton</a>
</div>

<div class="mainpage"></div>
<!-- This is page under the navigator for placing the content, right now it's empty -->

相关问题
最新问题