Нижний колонтитул Bootstrap перекрывает содержимое на небольших экранах?

99
7

У меня проблема с макетом начальной загрузки.

В принципе, все выглядит нормально на больших экранах, но на меньших экранах мой нижний колонтитул перекрывает содержимое или содержимое перекрывает нижний колонтитул!

Это код, который у меня есть: 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 -->

Может кто-то, пожалуйста, будь добр и помог мне в этом вопросе?

Заранее спасибо.

спросил(а) 2018-08-19T10:46:00+03:00 2 года, 2 месяца назад
1
Решение
107

Попробуйте удалить height: 100% от div. На мобильном устройстве контейнер на 100% высок, но из-за того, что столбцы укладываются в стек, и каждый столбец наследует высоту, у вас есть родитель со 100% высотой и двумя столбцами с каждыми 100%, что делает его 200% высоты.

ответил(а) 2018-08-19T10:57:00+03:00 2 года, 2 месяца назад
41

Это то, что вы ищите?


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 -->

ответил(а) 2018-08-19T10:54:00+03:00 2 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема