一旦内容低于屏幕高度，布局就会混乱

时间：2017-12-23 22:57:15

标签： html css

我一直致力于克隆“纽约时报”的文章并练习元素的定位。似乎所有东西都堆积在一起，直到你不得不开始向下滚动。一旦我添加了低于我的浏览器屏幕的内容，一切就会变得不合适并且似乎推高了。我正在学习，随时可以告诉我一些不好的做法。我正在添加的HTML是有效的，在此之后添加的任何内容都会导致问题。

HTML：

<!Doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta charset="utf-8">
    <title>Space Ripples Reveal Big Bang's Smoking Gun - The New York Times</title>
</head>
<body>
    <div class="sectionbox"> <img src="section.png" height="20" width="20"><div class="sectiontext">SECTIONS</div>
</div>
<div class="container">
    <div class="header">

        <div class="headerfields">
            <span>HOME</span>
        </div>

        <div class="headerfields2">
            <div>SEARCH</div>
        </div>

        <div class="title"><img src="logo.png"></div>

        <div class="headerbuttons"><button>SUBSCRIBE NOW</button><button>LOGIN</button>
        </div>

    </div>

    <div class="section2">
        <div class="row">
            <img class="topimages" src="1.jpg">
            <p class="toptext">Finalists in NASA’s Spacecraft Sweepstakes: A Drone on Titan, and a Comet-Chaser</p>
        </div>

        <div class="row">
            <img class="topimages" src="2.jpg">
            <p class="toptext"> Bruce McCandless, First to Fly Untethered in Space, Dies at 80</p>
        </div>

        <div class="row">
            <p class="toptext">Is Miley Cyrus Right? Do We Even Exist? We Try to Find Out.</p>
        </div>

        <div class="row">
            <img class="topimages" src="3.jpg">
            <p class="toptext">Glowing Auras and ‘Black Money’: The Pentagon’s Mysterious U.F.O. Program</p>
        </div>

        <div class="row">
            <img class="topimages" src="4.jpg">
            <p class="toptext">The Great Red Spot Descends Deep Into Jupiter</p>
        </div>
    </div>

    <div class="section3">
        <img src="ad.jpg">
    </div>

    <div class="section4">
        <p class="section4text">Space & Cosmos</p>
        <p class="section4text2">Space Ripples Reveal Big Bang’s Smoking Gun</p>
    </div>

</div>

</body>
</html>

CSS：

body{
    text-align: center;
    margin:0;
    padding:0;
    min-height: :100%;
}

.container{
    min-height:100%;
    position:relative;
    margin-left: 30px;
    border:1px solid black;
}

.header{
    height:50px;
    border:1px solid black;
    position:fixed;
    width:100%;
    background: white;
}

.sectionbox{
    position:fixed;
    float:left;
    width:90px;
    height:14px;
    z-index:1;
    margin-left: 15px;
    margin-top: 10px;
    padding:7px 9px;
    border:1px solid black;
    box-shadow: 0 3px 2px 0 rgba(0,0,0,0.06),
    inset -1px -1px 1px 0 rgba(0,0,0,0.02);
    border-bottom-color: #cecece;
    font-weight: 700;
    font-size: 0.6875rem;
    background: white;
}

img[src="section.png"]{
    float:left;
}

.sectiontext{
    margin-top: 3px;
}

.headerfields{
    float:left;
    margin-left: 120px;
    margin-top: 20px;
    font-family: "nyt-franklin",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 10px;
}

.headerfields2{
    float:left;
    margin-left: 30px;
    margin-top: 20px;
    font-family: "nyt-franklin",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size: 10px;
}

.title{
    padding-right:350px;
    padding-top: 15px;
}

.headerbuttons{
    position: absolute;
    top:10px;
    right: 50px;
    display: inline;

}

button{
    -moz-box-sizing: border-box;
    background-color: #6288A5;
    border: 1px solid #4D7B9F;
    border-radius: 3px;
    color: #fff !important;
    display: inline-block;
    font-size: 10px;
    font-family: nyt-franklin, sans-serif;
    font-style: normal;
    font-weight: 700;
    padding: 7px 10px 6px;
    text-transform: none;
    text-decoration: none;
    margin-right: 10px;
}

.section2{
    height:100px;
    margin-top: 50px;
    border:1px solid black;
}

.row{
    border-right: 1px solid black;
    margin:10px;
    float:left;
    height:80px;
    width:232px;
    background: white;
}

.topimages{
    float:left;
}

.toptext{
    font-size:12px;
}

.section3{
    margin:0 auto;
    width:85%;
    height: 250px;
    padding:30px;
    border-bottom: 1px solid black;
}

.section4{
    height: 125px;
    border-bottom: 1px solid black
    width:85%;
}

.section4text{
    position:absolute;
    left:65px;
    font-weight: 700;
    font-style: normal;
    font-family: "nyt-franklin",arial,helvetica,sans-serif;
}

.section4text2{
    font-family: "nyt-cheltenham",georgia,"times new roman",times,serif;
    font-style: italic;
    font-weight: 700;
    position: absolute;
    left: 65px;
    bottom: 0;
    font-size: 34px;
}

.section5{
    background: red;
    height:600px;
    width:85%;
}

1 个答案:

答案 0 :(得分：0)

我认为@JoshKisb的评论是正确的。您正在使用position: absolute，但在某些情况下，元素的引用框架是.container，这会导致问题。也就是说，.section4text2元素是position: absolute，但它最接近非static元素是.container。这意味着它使用container底部的bottom位置。

有关CSS定位的更详细说明，请参阅this solution I posted。

我也进行了一些编辑来清理重叠元素：

＆＃13;
＆＃13; 
body {
  text-align: center;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

.container {
  min-height: 100%;
  position: relative;
  margin-left: 30px;
  border: 1px solid black;
}

.header {
  height: 50px;
  border: 1px solid black;
  position: fixed;
  width: 100%;
  background: white;
}

.sectionbox {
  position: fixed;
  float: left;
  width: 90px;
  height: 14px;
  z-index: 1;
  margin-left: 15px;
  margin-top: 10px;
  padding: 7px 9px;
  border: 1px solid black;
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.06), inset -1px -1px 1px 0 rgba(0, 0, 0, 0.02);
  border-bottom-color: #cecece;
  font-weight: 700;
  font-size: 0.6875rem;
  background: white;
}

img[src="section.png"] {
  float: left;
}

.sectiontext {
  margin-top: 3px;
}

.headerfields {
  float: left;
  margin-left: 120px;
  margin-top: 20px;
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 10px;
}

.headerfields2 {
  float: left;
  margin-left: 30px;
  margin-top: 20px;
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 10px;
}

.title {
  padding-right: 350px;
  padding-top: 15px;
}

.headerbuttons {
  position: absolute;
  top: 10px;
  right: 50px;
  display: inline;
}

button {
  -moz-box-sizing: border-box;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff !important;
  display: inline-block;
  font-size: 10px;
  font-family: nyt-franklin, sans-serif;
  font-style: normal;
  font-weight: 700;
  padding: 7px 10px 6px;
  text-transform: none;
  text-decoration: none;
  margin-right: 10px;
}

.section2 {
  height: 100px;
  margin-top: 50px;
  border: 1px solid black;
}

.row {
  border-right: 1px solid black;
  margin: 10px;
  float: left;
  height: 80px;
  width: 232px;
  background: white;
}

.topimages {
  float: left;
}

.toptext {
  font-size: 12px;
}

.section3 {
  margin: 0 auto;
  width: 85%;
  height: 250px;
  padding: 30px;
  border-bottom: 1px solid black;
}

.section4 {
  height: 145px;
  position: relative;
  border-bottom: 1px solid black width:85%;
}

.section4text {
  position: absolute;
  left: 65px;
  font-weight: 700;
  font-style: normal;
  font-family: "nyt-franklin", arial, helvetica, sans-serif;
}

.section4text2 {
  font-family: "nyt-cheltenham", georgia, "times new roman", times, serif;
  font-style: italic;
  font-weight: 700;
  position: absolute;
  left: 65px;
  bottom: 0;
  font-size: 34px;
}

.section5 {
  background: red;
  height: 600px;
  width: 85%;
}
＆＃13; 
<div class="sectionbox"> <img src="section.png" height="20" width="20">
  <div class="sectiontext">SECTIONS</div>
</div>
<div class="container">
  <div class="header">

    <div class="headerfields">
      <span>HOME</span>
    </div>

    <div class="headerfields2">
      <div>SEARCH</div>
    </div>

    <div class="title"><img src="logo.png"></div>

    <div class="headerbuttons"><button>SUBSCRIBE NOW</button><button>LOGIN</button>
    </div>

  </div>

  <div class="section2">
    <div class="row">
      <img class="topimages" src="1.jpg">
      <p class="toptext">Finalists in NASA’s Spacecraft Sweepstakes: A Drone on Titan, and a Comet-Chaser</p>
    </div>

    <div class="row">
      <img class="topimages" src="2.jpg">
      <p class="toptext"> Bruce McCandless, First to Fly Untethered in Space, Dies at 80</p>
    </div>

    <div class="row">
      <p class="toptext">Is Miley Cyrus Right? Do We Even Exist? We Try to Find Out.</p>
    </div>

    <div class="row">
      <img class="topimages" src="3.jpg">
      <p class="toptext">Glowing Auras and ‘Black Money’: The Pentagon’s Mysterious U.F.O. Program</p>
    </div>

    <div class="row">
      <img class="topimages" src="4.jpg">
      <p class="toptext">The Great Red Spot Descends Deep Into Jupiter</p>
    </div>
  </div>

  <div class="section3">
    <img src="ad.jpg">
  </div>

  <div class="section4">
    <p class="section4text">Space & Cosmos</p>
    <p class="section4text2">Space Ripples Reveal Big Bang’s Smoking Gun</p>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题