Question

我的网页最初只能垂直滚动。当我添加一个相对定位的div（包含文本）时，网页突然垂直和（略微）水平滚动 - 尽管div被包含在网页的原始尺寸内。这是为什么？

<!DOCTYPE html>

<html>

<head>

<link href="jerrell.css" rel="stylesheet" type="text/css" />

<script src="jerrell.js"></script>  
</head>

<body style="background-color: #b2b2b2;">

<div class="top-bar">

<div id="strip">
<span style="color: #808080">_</span>
</div>
 <h1 id="name">
<span id="jerrel">Jerrell</span> 
<span id="michael">Cockerham</span>
</h1>

<h4 id="options">
<span id="splits">|</span> 
<a href="#" style="text-decoration: none"><span id="go">About</span></a> 
 <span id="splits">|</span> 
 <a href="#" style="text-decoration: none"><span id="go-two">Search</span></a> 
 <span id="splits">|</span>
 </h4>

 </div>

 <div class="welcome">
 <p id="welcome">Click to Begin</p>
  </div>

  <div class="mncourse">
  <table id="tissue">
  <tr id="posdep">
  <td id="posdepdat">
  <p id="high1">Positively Dependent</p>
  <p id="low1">Here is where I attempt to poetically express my woes.</p>
  </td>
  <td id="tramxdat">
  <p id="high2">Trail Mix</p>
  <p id="low2">Everything I find interesting in mathematics.</p>
   </td>
    </tr>
   </table>
  </div>
  <div class="cred">Tree photo taken with iPhone</div>
 </body>
</html>

 /* #66ffff (blu), white (wht), #535353 (gry) */



body {
 background: url(intric.jpg);
 background-size: cover;
 height: 1200px;
}

#name {

 font-family: Trebuchet MS;
 position: fixed;
 top: -20px;
 z-index: 1;
}



#jerrel {

 color: #66ffff;
}

#michael {

 color: white;
}



#strip {

 position: fixed;
 left: -50px;
 top: -10px;
 background-color: #535353;
 width: 2000px;
 height: 50px;
 opacity: .9;
}

#options {

 font-family: Trebuchet MS;
 position: fixed;
 right: 5px;
 top: -11px;
 z-index: 1;
}



#splits {

 color: white;
}



#go {

 color: #66ffff;

}



#go-two {

 color: #66ffff;

}



#go:hover {

 color: white;
}



#go-two:hover {

 color: white;
}

#welcome {
 position: fixed;
 font-family: Trebuchet MS;
 width: 400px;
 left: 0;
 right: 0;
 margin: 0 auto;
 border: 0px;
 text-align: center;
 top: 42%;
 color: white;
 font-size: 50px;
 z-index: 4;
}

.mncourse {
 position: fixed;
 text-align: center;
 left: 0;
 right: 0;
 top: 42%;
}

#tissue {
 margin-left: auto;
 margin-right: auto;
}

#high1 {
 font-family: Trebuchet MS;
 font-size: 32px;
 color: #66ffff;
}

#low1 {
 font-family: Trebuchet MS;
 color: white;
 font-size: 20px;
}

#high2 {
 font-family: Trebuchet MS;
 font-size: 32px;
 color: #66ffff;
}

#low2 {
 font-family: Trebuchet MS;
 color: white;
font-size: 20px;
}

td {
padding: 40px;
}

#posdepdat {

}

#tramxdat {

}

.cred {
 position: relative;
 box-sizing: border-box;
 left: 30px;
 top: 1180px;
 font-family: Trebuchet MS;
 color: red;
}

Answer 1

框模型扩展了它的父容器。您可以使用css中的box-sizing: border-box或容器上的overflow-x: hidden

来解决此问题

Answer 2

.cred {
 position: relative;
 box-sizing: border-box;
 left: 30px;
 top: 1180px;
 font-family: Trebuchet MS;
 color: red;
}

我认为left: 30px;问题在于：它将.cred向右移动30 px而不扩展其父元素。而且由于它的（默认）宽度是100％，那就是100％加上整体的30px ......

在网页上水平滚动的不需要的选项

2 个答案: