Сделать div в нижней части страницы в каждом браузере

У меня есть веб-страница с известным содержанием в верхней и нижней частях страницы и неизвестной средней части. Средняя часть может быть меньше 100px или больше, чем 1000px в высоту.Сделать div в нижней части страницы в каждом браузере

Чтобы сделать среднюю часть min-height: 100%;не является опцией.

Я нашел хороший ответ на мой вопрос:

 html{ 
 
      height:100%; 
 
      width:100%; 
 
     } 
 
     body{ 
 
      min-height:100%; 
 
      display:table; 
 
     } 
 
     .top{ 
 
      display:block; 
 
     } 
 
     .main{ 
 
      display:block; 
 
     } 
 
     .buttom{ 
 
      display:table-footer-group; 
 
     }

<html> 
 
<body> 
 
    <div class="top"> 
 
\t Fixed top box 
 
    </div> 
 
    <div class="main"> 
 
\t Box with unknown content 
 
    </div> 
 
    <div class="buttom"> 
 
\t Fixed buttom box 
 
    </div> 
 
</body> 
 
</html>

Но по какой-то причине он не работает в браузере Mozila. Может ли кто-нибудь предложить что-то, что работает в каждом браузере?

Для уточнения: Всего Div должны быть разделены и ни в коем случае один деление с появляться на вершине другого

источник

2016-08-17 levkaster

Добавление height:100%; увеличивает высоту в Mozilla.

 html{ 
 
      height:100%; 
 
      width:100%; 
 
     } 
 
     body{ 
 
      min-height:100%; 
 
      display:table; 
 
       height:100%; 
 
     } 
 
     .top{ 
 
      display:block; 
 
     } 
 
     .main{ 
 
      display:block; 
 
     } 
 
     .buttom{ 
 
      display:table-footer-group; 
 
       height: 20px; 
 
     }

<html> 
 
<body> 
 
    <div class="top"> 
 
\t Fixed top box 
 
    </div> 
 
    <div class="main"> 
 
\t Box with unknown content 
 
    </div> 
 
    <div class="buttom"> 
 
\t Fixed buttom box 
 
    </div> 
 
</body> 
 
</html>

источник

2016-08-17 12:39:59

Работал! Благодаря! – levkaster

Это будет работать для вас. Используйте position:fixed и bottom:0. В этом случае, независимо от каких-либо других элементов на странице, внизу будет отображаться 0px внизу страницы.

.top { 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 50px; 
 
    top: 0; 
 
    background: red 
 
} 
 
.main { 
 
    /* style for main */ 
 
} 
 
.bottom { 
 
    height: 100px; 
 
    width: 100vw; 
 
    background: #444; 
 
    position: fixed; 
 
    bottom: 0; 
 
    color: white; 
 
}

<html> 
 

 
<body> 
 
    <div class="top"> 
 
    Fixed top box 
 
    </div> 
 
    <div class="main"> 
 
    Box with unknown content 
 
    </div> 
 
    <div class="bottom"> 
 
    Fixed buttom box 
 
    </div> 
 
</body> 
 

 
</html>

В случае, если вы не ищете фиксированной нижней вы можете реализовать то же самое, используя javascript.

jQuery(document).ready(function() { 
 
    var windowHeight = $(window).height(); 
 
    var mainHeight = $(".main").height(); 
 
    var topHeight = $(".top").height(); 
 
    var bottomHeight = $(".bottom").height(); 
 
    if ((windowHeight - (topHeight + bottomHeight)) > mainHeight) { 
 
    $(".bottom").css("position", "fixed"); 
 
    } else { 
 
    $(".bottom").css("position", "initial"); 
 
    } 
 
});

.top { 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 50px; 
 
    top: 0; 
 
    background: red 
 
} 
 
.main { 
 
    height: 10px; 
 
} 
 
.bottom { 
 
    height: 100px; 
 
    width: 100vw; 
 
    background: #444; 
 
    bottom: 0; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="top"> 
 
    Fixed top box 
 
    </div> 
 
    <div class="main"> 
 
    Box with unknown content 
 
    </div> 
 
    <div class="bottom"> 
 
    Fixed buttom box 
 
    </div> 
 
</body>

источник

2016-08-17 12:38:36

Это не работает! если высота средней части больше, чем высота окна, а затем фиксированный нижний div будет на средней части – levkaster

Разве это не то, что вы хотите. Вы упомянули фиксированное дно в вопросе. Что именно должно быть поведением? –

Вы можете расположить по абсолютной донизу.

 html{ 
 
      height:100%; 
 
      width:100%; 
 
     } 
 
     body{ 
 
      min-height:100vh; 
 
      display:table; 
 
     } 
 
     .top{ 
 
      display:block; 
 
     } 
 
     .main{ 
 
      display:block; 
 
     } 
 
     .buttom{ 
 
      display:block; 
 
      position:absolute; 
 
      bottom:0; 
 
     }

<html> 
 
<body> 
 
    <div class="top"> 
 
\t Fixed top box 
 
    </div> 
 
    <div class="main"> 
 
\t Box with unknown content 
 
    </div> 
 
    <div class="buttom"> 
 
\t Fixed buttom box 
 
    </div> 
 
</body> 
 
</html>

источник

2016-08-17 12:42:54

-1

Надеется, что это помогает.

.top { 
 
    float: left; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #f00; 
 
} 
 
.main{} \t \t \t 
 
.buttom { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 50px; 
 
    bottom: 0; 
 
    background-color: #00f; 
 
}

<div class="top"> 
 
    Fixed top box 
 
</div> 
 
<div class="main"> 
 
    Box with unknown content 
 
</div> 
 
<div class="buttom"> 
 
    Fixed buttom box 
 
</div>

источник

2016-08-17 12:49:34

Сделать div в нижней части страницы в каждом браузере

ответ

Смежные вопросы