html - 缩放到移动设备时文本从 div 流出

Question

我制作的布局需要在移动屏幕上可见。目前，当我缩小到移动设备或在我的 iPhone 5 上查看网站时，其中带有较长文本的 div 到处都是。

由于我将所有内容都包装在称为 section0、section1 等的 div 中，我认为为它们设置高度会有所帮助，但这并没有帮助。背景发生变化，但溢出的文本只是停留在原处。这些部分中有页面容器，但为这些设置高度也无济于事。

我在这里有点无能为力，因为这个问题只发生在底部的 3 个 div 上。

我的部分是这样构建的；

     <div class="section" id="section3">
     <div class="row">
      <div class="col-lg-6 werkwijze">
            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

  </div>
 </div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
    <div class="col-lg-5 botlogo">
    <div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
    </div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->

我将这些样式用于各个部分；

.page_container {
        height:100% !important;
        display:block;
    }
#section3{
        background: none;
        border-bottom: 2px solid #8f8f8f;
        height:100%;
    }

有6段(0-5)，从第3段开始出错。

我尝试添加一个 fiddle ，但出于某种原因我无法重现问题，也无法共享原始网站。 http://jsfiddle.net/MgcDU/我希望有人认识到这个问题并能帮助我。

Answer 1

根据您发布的代码片段，您有一个额外的 </div>在那里可能会导致您的问题(我在下面放了一个箭头):

     <div class="section" id="section3">
     <div class="row">
      <div class="col-lg-6 werkwijze">
            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

            <h1>Lorem Psum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>

  </div>   <------------------------- This one seems like an extra
 </div> <!-- end col -->
</div> <!-- end row -->
<div class="row">
    <div class="col-lg-5 botlogo">
    <div class="left"><img src="css/images/logo4.png"></div><div class="right"><h3>LOREM IPSUM</h3><h4>dolor sit amet</h4></div>
    </div><!-- end col -->
</div> <!-- end row -->
</div> <!-- end sec -->