Как сделать контент div полноэкранным - PullRequest
Новая
       30

Как сделать контент div полноэкранным

0 голосов
/ 28 марта 2020

У меня есть html страница, контейнер div содержит заголовок, div содержимого и нижнего колонтитула, код html cod и css выглядит следующим образом:

HTML -Code: 

  <html>
    <div class="container">
    <div class="header"></div>
    <div class="content">
    <div class="content2"></div>
    </div>
    <div class="footer"></div>
    </div>
    </html>

Css код: 

header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}

.content{
min-height: 100%;
width:100%;
background-color:#006;
margin-top:70px;
margin-bottom:60px }

.content2{
margin:auto;
min-height: 100%;
width:95%;
background-color:#FFFEA5;
padding-bottom: 20px;
}

.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}

Я хочу, чтобы content2 div был полноэкранным, либо он ничего не содержал, я делал коды выше, но не работал выглядит как прикрепленное изображение.

enter image description here

Ответы [ 3 ]

0 голосов
/ 28 марта 2020

Я полагаю, что вам не хватает и вам нужен тег body (помимо прочего), который установит весь фон в синий цвет. 

body{
background-color:#006
}

header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}

.content{
min-height: 100%;
width:100%;
background-color:#006;
margin-top:70px;
margin-bottom:60px }

.content2{
margin:auto;
min-height: 100%;
width:95%;
background-color:#FFFEA5;
padding-bottom: 20px;
}

.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}
  <html>
  <body>
    <div class="container">
    <div class="header"></div>
    <div class="content">
    <div class="content2">test</div>
    </div>
    <div class="footer"></div>
    </div>
     </body> 
    </html>
0 голосов
/ 29 марта 2020

Спасибо вам всем, я изменил css файлов и сделал так, и теперь он работает: 

 .header{
    padding-bottom:5px;
    width:100%;
    position:fixed;
    top:0;
    z-index:100;
    height:70px;
    background-color:#006}
.footer{
    text-align:center;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:100;
    height:70px;
    background-color:#006}
.content{
    min-height: 100%;
    width:100%;
    background-color:#FFFEA5;
    margin-top:70px;
    margin-bottom:60px }
.content2{
    height: 100%;
    margin:auto;
    width:95%;
    background-color:#FFFEA5;
    padding-bottom: 80px;
}
.wrapperDiv{
    background-color: #006;
    padding:0;
    margin:0;
    height: 100%;
        }
0 голосов
/ 28 марта 2020

Может быть, вы могли бы попытаться поместить все эти div в родительский div, например, и установить для этого div 100% ширину и высоту (высота не обязательна, она также установит 100%), и тогда у вас будет контейнер div, занимающий весь экран .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...