Question

我的引导程序布局有问题。

基本上，在大屏幕上看起来一切正常，但在小屏幕上，我的页脚与内容重叠或内容与页脚重叠！

这是我的代码：https://jsfiddle.net/xpvt214o/639029/

如果您将HTML部件放大和缩小并查看页脚，则会看到问题。

这是我的完整代码：

html,body,.col-md-12,.row {
  height:100%;
}
.row > div {
  height:100%;
}
  
  .YOsidemenu{
	padding:0;
	font-weight:bold;
	background-color: #ffc90e;
	padding-top:10px;
	max-width:200px;
	
}

@media only screen and (max-width:768px) {
.YOsidemenu{
	display:none;
}
}

  
/* to make columns visible */
.row .col-sm-2 {
  background-color:red;
}
.row .col-sm-10 {
  background-color:green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">






<div class="col-md-12">
    <div class="row">
        <div class="col-sm-2">
            Sidebar content
        </div>
        <div class="col-sm-10">
            Body content
        </div>
    </div>
</div>
        
    </div>
    
    
    	   	<!-- Footer -->
	<section id="footer" style="text-align:left; !important">
		<div class="container">
			<div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
				<div class="col-xs-12 col-sm-4 col-md-4">
					<h5>Quick links</h5>
					
					
				<ul class="list-unstyled quick-links">
						<li><a href="index.php">Home</a></li>
						<li><a href="help.php">Help</a></li>
						<li><a href="signin.php">Sign-in</a></li>
						<li><a href="affiliat-signup.php">affiliate</a></li>
						<li><a href="signup.php">Promote</a></li>
						
					</ul>
				
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<h5>Support</h5>
					<ul class="list-unstyled quick-links">
						<li><a href="javascript:void();"><i class="fa fa-envelope"></i>support@email.com</a></li>
						<li><a href="javascript:void();"><i class="fa fa-phone-square"></i>+44 7842227819</a></li>
						<li><a href="javascript:void();"><i class="fa fa-globe"></i>www.website.com</a></li>
	
					</ul>
				</div>

			</div>
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
					<p>this site a registered company. </p>
					<p class="h6">&copy All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
				</div>
				</hr>
			</div>	
		</div>
	</section>
	<!-- ./Footer -->

有人能请我帮个忙吗？

先谢谢了。

Answer 1

这是您要找的东西吗？

html,
body,
.col-md-12,
.row {
  height: 100%;
}

.row>div {
  height: 100%;
}

.YOsidemenu {
  padding: 0;
  font-weight: bold;
  background-color: #ffc90e;
  padding-top: 10px;
  max-width: 200px;
}

@media only screen and (max-width:768px) {
  .YOsidemenu {
    display: none;
  }
}


/* to make columns visible */

.row .col-sm-2 {
  background-color: red;
}

.row .col-sm-10 {
  background-color: green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">






  <div class="col-md-12">
    <div class="row">
      <div class="col-sm-2 col-xs-2">
        Sidebar content
      </div>
      <div class="col-sm-10 col-xs-10">
        Body content
      </div>
    </div>
  </div>

</div>


<!-- Footer -->
<section id="footer" style="text-align:left; !important">
  <div class="container">
    <div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
      <div class="col-xs-12 col-sm-4 col-md-4">
        <h5>Quick links</h5>


        <ul class="list-unstyled quick-links">
          <li><a href="index.php">Home</a></li>
          <li><a href="help.php">Help</a></li>
          <li><a href="signin.php">Sign-in</a></li>
          <li><a href="affiliat-signup.php">affiliate</a></li>
          <li><a href="signup.php">Promote</a></li>

        </ul>

      </div>
      <div class="col-xs-12 col-sm-4 col-md-4">
        <h5>Support</h5>
        <ul class="list-unstyled quick-links">
          <li><a href="javascript:void();"><i class="fa fa-envelope"></i>support@email.com</a></li>
          <li><a href="javascript:void();"><i class="fa fa-phone-square"></i>+44 7842227819</a></li>
          <li><a href="javascript:void();"><i class="fa fa-globe"></i>www.website.com</a></li>

        </ul>
      </div>

    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
        <p>this site a registered company. </p>
        <p class="h6">&copy All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
      </div>
      </hr>
    </div>
  </div>
</section>
<!-- ./Footer -->

Answer 2

尝试从div中删除height: 100%。在移动设备上，容器的高度为100%，但是由于列被堆叠并且每一列都继承了高度，因此您有一个父级，其高度为100％，两列的高度为100％，使其高度为200％。

Bootstrap页脚是否在小屏幕上重叠了内容？

2 个答案: