Question

我的内容框（白框）的宽度减小到960px以下，文本从右侧的窗口中移出。我试图找出使用检查器，但在我看来，一切都已经定义好了。我不知道自己在做什么错。

HTML和CSS一起：

#slika {
  height:70vh;
  width:100vw;
  background-color:#df1f26;
  object-fit: cover;
  overflow:hidden;
}

.imagetop {
  height:auto;
  width:100vw;
  float: left;
  object-fit: cover;
}

#crveni {
  position:relative;
  height:auto;
  width:100vw;
  background-color:#df1f26;
  padding-bottom:80px;
}

#sadrzaj {
  position:relative;
  top:-80px;
  left:20vw;
  width:510px;
  padding:35px;
  background-color:white;
  line-height:180% !important;

}

@media (max-width:960px) {
  h1 {
    color:#df1f26;
  }
  #sadrzaj {
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    width:100vw;
  }
  #crveni {
    padding-bottom:0px;
    position: absolute;
  }
  #slika {
  height:auto;
  }
  .imagetop {
  height:auto;
  width:100vw;
  object-fit: cover;
}
}

<div id="slika"><img src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM-970-80.jpg" alt="" class="imagetop"></div>
<div id="crveni"><div id="sadrzaj"><h1>Main title</h1><h3>Subtitle of this post. Subtitle of this post. Subtitle of this post. Subtitle of this post. </h3><br/><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nulla in ornare porttitor. Nam molestie dolor euismod commodo laoreet. Nam malesuada orci ac volutpat pretium. Nam lectus ante, facilisis ac urna eget, cursus semper nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus orci, rutrum id auctor vel, convallis et lacus. Vestibulum luctus tincidunt purus pretium cursus. Vestibulum justo erat.</div></div>

Answer 1

问题是CSS中没有定义border-box属性。

因此，由于body，内容溢出了width: 100vw，并且padding: 35px;被计算为总宽度。

#sadrzaj {
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    box-sizing: border-box; //added box-sizing
}

Solved JSFiddle link

960px以下的内容框-窗口外

2 个答案: