Элемент нижнего колонтитула Flex-box Centered

-3

Я создаю пользовательское окно с графическим интерфейсом с заголовком, который получает высоту через новые элементы, нижний колонтитул со статической высотой и промежуточный промежуток между ними, который автоматически занимает остальную часть высоты. Я попытался использовать this answer, но нижний колонтитул оказался вертикально-центрированным. Изображение:Элемент нижнего колонтитула Flex-box Centered

Если кто-нибудь знает, почему у верхней части головы, это было бы весьма признателен. Элемент добавляется на страницу с помощью javascript, поэтому код довольно грязный. Спасибо за ваше время.

источник

2016-06-05 Tom Burris

Просьба представить соответствующие коды вместе с вашим вопросом. –

CSS в точности совпадает с ответом в моей ссылке. –

Вы можете установить высоту до 100% и использовать запас, чтобы сделать нижний колонтитул липким. – flux

Я до сих пор не знаю, что этот вопрос, но я сделал решение, используя CSS-код calc() функции.

HTML:

<div id="myWindow"> 
    <div id="header"> 
     Header 
    </div> 

    <div id="footer"> 
     <div id="subHeaderContainer"> 
      <div id="subHeader"> 
       Sub Header 
      </div> 
     </div> 

     <div id="subFooter"> 
      Sub Footer 
     </div> 
    </div> 
</div>

CSS:

#myWindow { 
    width: auto; 
    height: auto; 
    resize: both; 
    border: 2px solid black; 
    overflow:hidden; 
} 

#header { 
    height: 20px; 
    background-color: grey; 
} 

#footer { 
    width:100%; 
    height: calc(100% - 20px); 
} 

#subHeaderContainer { 
    width:100%; 
    height: calc(100% - 30px); 
} 

#subFooter { 
    width:100%; 
    height:30px; 
}

источник

2016-06-10 21:24:36

Что можно сказать о следующем:

<body> 
<header class="header"></header> 
<main class="spacer"></main> 
<footer class="footer"></footer> 
</body>

html { 
    height: 100%; 
} 
body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100%; 
} 
.spacer { 
    flex: 1; 
}

источник

2016-06-05 19:10:31 seahorsepip

По какой-то причине это вынуждает спейсер и нижний колонтитул справа от заголовка, вне поля зрения. –

Элемент нижнего колонтитула Flex-box Centered

ответ

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