Устранение неполадок CSS-макета

Я создал шаблон для макета, который я намереваюсь выполнить. Кажется, что все хорошо работает с тем, что я узнал из сообщества stackoverflow.Устранение неполадок CSS-макета

Однако нижний колонтитул, который является его собственным контейнером и имеет «section7», как другой DIV, не имеет высоты в 150 пикселей. В основном все секции имеют фиксированную высоту, за исключением разделов 5 и раздела 6, которые должны масштабироваться по высоте в зависимости от размера окна браузера или содержимого, которое будет размещено внутри раздела. Поэтому, если контент разрежен, я просто хочу, чтобы высота была на 100% оставшегося пространства браузера, чтобы сайт был сверху вниз. Однако, если есть достаточно длинный контент, я хочу, чтобы средняя часть была адаптирована и продолжалась по мере необходимости. Надеюсь, у меня есть смысл.

Задача состоит в том, что я не знаю, где я ошибаюсь, и поэтому не знаю, как задать вопрос в функции поиска, поскольку я считаю, что это непростая задача для тех, у кого есть опыт. Любая помощь приветствуется.

HTML-:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Sample Website</title> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 

<div class="container"> 

    <div class="header"> 

     <div class="section1">section 1</div> 
     <div class="section2">section 2</div> 
     <div class="section3">section 3</div> 
     <div class="section4">section 4</div> 

    </div> 

    <div class="middle"> 

     <div class="section5">section 5</div> 
     <div class="section6">section 6</div> 

    </div> 

    <div class="footer"> 

     <div class="section7">section 7</div> 

    </div> 

</div> 

</body> 
</html>

CSS-:

@charset "utf-8"; 
/* CSS Document */ 

body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    padding: 0px; 
    background-color:#DBDBDB 
} 

div.container { 
    width: 1200px; 
    background-color:#FFFFFF; 
    margin-left:auto; 
    margin-right:auto;  
} 

div.header { 
    height: 100px;  
} 

div.middle { 
    min-height: 400;   
} 

div.footer { 
    height: 150px; 
} 

div.section1 { 
    background-color:#FF0004; 
    height: 100px; 
    width: 275px; 
    float:left; 
    position:relative; 
} 

div.section2 { 
    background-color:#FFA600; 
    height: 100px; 
    width: 100px; 
    float:left; 
    position:relative; 
} 

div.section3 { 
    background-color:#00C304; 
    height: 50px; 
} 

div.section4 { 
    background-color:#DFDD00; 
    height: 50px; 
} 

div.section5 { 
    background-color:#0A00FF; 
    width: 275px; 
    height: 400px; 
    float:left; 
    height: 100vh; 
} 

div.section6 { 
    background-color:#CB05B1; 
    width: 925px; 
    height: 400px; 
    float:right; 
    height: 100vh; 
} 

div.section7 { 
    background-color:#9E9E9E; 
    height: 150px; 
}

источник

2016-03-15 Andy Parker

Объясняя вопрос, а не предоставление вашего жизненного фона, может дать вам лучший ответ.Я не видел ничего, даже намекая на вопрос/вопрос в первом абзаце. –

Я сделал для вас скрипку @ andy-parker здесь: https://jsfiddle.net/2L55g0f9/ – Hazonko

Плавающие элементы необходимо очистить, чтобы элементы после правильного выравнивания и не перемещались в элементы, которые вы плавали. Раздел 5 и Раздел 6.

Добавьте следующее определение класса в таблицу стилей

.clearfix:before, .clearfix:after { 
    content: " "; 
    display: table; 
}

Измени следующий тег <div class="middle"> в <div class="middle clearfix">

HTML5 также включает в себя <header> и <footer> элементов, а также <article> тегов к сделать язык документа более смысловым. Таким образом, для HTML5 вы можете использовать

<header> 

    <div class="section1">section 1</div> 
    <div class="section2">section 2</div> 
    <div class="section3">section 3</div> 
    <div class="section4">section 4</div> 

</header>

<footer> 

    <div class="section7">section 7</div> 

</footer>

https://jsfiddle.net/raythcael/s49o4rjz/2/

источник

2016-03-15 16:48:57 Tish

Чтобы .section7 имеют высоту 150px добавить display: inline-block;

div.section7 { 
    background-color: #9E9E9E; 
    height: 150px; 
    display: inline-block; 
}

Se e: https://jsfiddle.net/zvkxj6v8/

источник

2016-03-15 16:48:35

Причина, почему высота не работает должным образом обусловлено тем, что Див по выше он установлен в «поплавок» , Добавить "clear: both;" на div.section7, чтобы очистить поплавки.

источник

2016-03-15 16:49:35 Bonzai

https://jsfiddle.net/2L55g0f9/1/

потому, что раздел 5 и 6 всплывают, вы не видите высоту секции 7. Все, что я сделал clearfix это, и вы получили вашу высоту :)

.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
}

источник

2016-03-15 16:52:28 Hazonko

Устранение неполадок CSS-макета

ответ

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