Липкий нижний колонтитул Flexbox и переполненная область содержимого

Как видно here, Я пытаюсь воссоздать решение для липкого нижнего колонтитула - который не имеет установленной высоты.Липкий нижний колонтитул Flexbox и переполненная область содержимого

Я создал сайт таким же образом, но кажется, что содержимое продолжает переполняться над нижним колонтитулом, а нижний колонтитул просто статичен (не так липкий!) Очевидно, что эта настройка flexbox сжимает «среднюю секцию» 'от расширения за «разрешенным» размером (= Окно - верхний колонтитул), и он не будет изменять размер, чтобы соответствовать содержимому, и нажмите нижний колонтитул.

enter image description here

Я попытался изменить различные настройки для перелива на все, я попытался изменить настройки отображения элементов в средней секции и самой середине раздела. Я не могу найти проблему !!

Теперь я понимаю, что могу решить это сто разных способов, если бы я только определил высоту нижнего колонтитула. Но я стараюсь не делать этого.

Вот некоторая упрощенная HTML, чтобы показать мою структуру

<body class="Site"> 
<header><div id="header>...</div></header> 
<div id="mid" class="Site-content"> 
    <div id="links" class="fadein"> 
     <ul><li>..</li></ul> 
    </div> 
    <div id="content" class="content fadein"> 
    text text text 
    </div> 

</div> 
<footer> 
    <div id="footer"></div> 
</footer> 
</body>

и соответствующему CSS

div#header { 
    position:relative; 
    display:block; 
    top:0px; 
    left:0px; 
    margin:0 auto 5px auto; 
    width:auto; 
} 
div#mid { 
    display:block; 
    width:100%; 
    height:auto; 
    position: relative; 
    background:#C69; 
} 
     div#content { 
      margin-left:120px; 
      width:720px; 
      padding: 25px; 
      background:#0F9; 
     } 

     div#links { 
      position:absolute; 
      left:0px; 
      top:0px; 
      width:100px; 
      padding: 5px; 
      margin-left:10px; 
      margin-top:35px; 
      background:#0C6; 
     } 
.Site { 
    min-height: 100%; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
} 

.Site-content { 
    flex: 1; 
    -webkit-box-flex: 1; 
    -webkit-flex: 1; 
    -moz-box-flex: 1; 
    -ms-flex: 1; 
} 
footer { 
    clear:both; 
    width:auto; 
    padding:10px; 
}

Вашего оригинальное решение будет высоко ценятся!

источник

2013-12-10 toms

В отличие от липкого нижнего колонтитула Flexbox Walton, вы не используете 'min-height: 100vh;' но 'min-height: 100%;'. Может, в этом и проблема? – kleinfreund

Проверьте эту ссылку http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/, чтобы узнать, как реализовать липкий нижний колонтитул с помощью flexbox.

И лично я использую эту технику http://www.joshrcook.com/a-responsive-sticky-footer/, которая выполняется без использования flexbox.

<body> 
    <div class="container"> 
     <!-- content here --> 

    <footer> 
     <!-- content for footer --> 
    </footer> 
    </div> 
</body>

И для CSS довольно простой

html, 
body { 
    height: 100%; 
} 
.container { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
footer { 
    display: table-row; 
    height: 1px; 
}

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

источник

2013-12-10 12:55:05 Bobby

Хотя я не нашел ошибку в своем коде для использования flex-коробки, это действительно отличное решение с тем же конечным результатом! Спасибо и молодец! – toms

Липкий нижний колонтитул Flexbox и переполненная область содержимого

ответ

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