CSS-контейнер min-height 100%

Я пытаюсь получить мой контейнер, чтобы заполнить высоту 100%, так как некоторые страницы имеют ограниченную информацию о них.CSS-контейнер min-height 100%

Я попытался установить колонтитул позицию, содержание мин высоты и т.д. ...

Best я сумел устанавливаю содержание в абсолютный и затем идет более чем на 100% и скрывает нижние колонтитулы. Я пробовал автомаршрут минус высота нижнего колонтитула, но не повезло.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Client Check</title> 
    <meta charset="utf-8"> 
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" /> 
    <link rel="stylesheet" type="text/css" href="../css/main.css"> 
</head> 
<body> 
<div id="header"> 
    <a href="../index.php"><img src="../images/logo-header.jpg" /></a> 
    <div id="navigation"> 
     <a href="#" class="navtext">How it works</a> 
     <a href="#" class="navtext">About us</a> 
     <a href="#" class="navtext">Help</a> 
     <a href="#" class="navtext">Services</a> 
     <a href="#" class="navlogin">Log in</a> 
    </div> 
</div> 
<div id="content"> 
    <div id="search"> 
     <h2>Check a Client</h2> 
     <form method="post"> 
      <h3>Client info</h3> 
      <label>Last Name:</label><input type="text" name="lname" /> 
      <label>House Number/Name:</label><input type="text" name="address" /> 
      <label>Postcode:</label><input type="text" name="post" /> 
      <input type="submit" name="search" value="Search" /> 
     </form> 
    </div> 
</div> 
<div id="footer"> 
    <img src="../images/logo-header.jpg" /> 
    <p><a href="#">Terms and Conditions</a> | <a href="#">Privacy Policy</a></p> 
    <p>&copy; 2015 Client Check. All Rights Reserved.</p> 
</div> 
</body> 
</html> 

#content{ 
    width: 100%; 
    min-height: 100%; 
} 

#about{ 
    width: 100%; 
    background-color: #FFFFFF; 
} 

#about h2{ 
    font-size: 2em; 
    padding-top: 25px; 
    text-align: center; 
    color:#F48C6B; 
} 

#about p{ 
    font-size: 1.3em; 
    text-align: center; 
    color: #878786; 
} 

#about span{ 
    font-weight: bold; 
    color: #F48C6B; 
} 

#about button{ 
    margin: 0 auto; 
    margin-bottom: 30px; 
    display: block; 
    color: #FFFFFF; 
    background-color: #57BB89; 
    border: none; 
    outline: none; 
    padding: 15px; 
    border-radius: 8px; 
    box-shadow: 4px 4px #4AA478; 
} 

#about button:hover{ 
    color: #F48C6B; 
} 

#how{ 
    width: 100%; 
    background-color: #F7F7F7; 
    text-align: center; 
} 

#how h2{ 
    font-size: 2em; 
    padding-top: 25px; 
    text-align: center; 
    color:#F48C6B; 
} 

#checkclient{ 
    width: 280px; 
    height: 120px; 
    display: inline-block; 
    margin-right: 50px; 
    background-color: #FFFFFF; 
    border-radius: 8px; 
    box-shadow: 6px 6px #B5B2B2; 
} 

#reportclient{ 
    width: 280px; 
    height: 120px; 
    margin-bottom: 35px; 
    display: inline-block; 
    background-color: #FFFFFF; 
    border-radius: 8px; 
    box-shadow: 6px 6px #B5B2B2; 
} 

#how button{ 
    width: 200px; 
    height: 35px; 
    margin: 0 auto; 
    color: #FFFFFF; 
    background-color: #57BB89; 
    border: none; 
    outline: none; 
} 

#how button:hover{ 
    color: #F48C6B; 
} 

#how p{ 
    color: #858889; 
    font-weight: bold; 
    font-size: 1.3em; 
} 

#how button img{ 
    max-width: 20px; 
    max-height: 20px 
} 

#search{ 
    width: 100%; 
    height: 100%; 
    background-color: #EFEDE7; 
    text-align: center; 
} 

#search h2{ 
    margin: 0; 
    padding-top: 25px; 
    font-size: 2em; 
    text-align: center; 
    color:#F48C6B; 
} 

#search form{ 
    width: 450px; 
    height: 350px; 
    display: inline-block; 
    margin-top: 20px; 
    margin-bottom: 35px; 
    background-color: #FFFFFF; 
    box-shadow: 6px 6px #B5B2B2; 
} 

#search form h3{ 
    color: #57BB89; 
    padding: 10px 0; 
} 

#search form label{ 
    width: 200px; 
    color: #C9C8C8; 
    margin-left: 20px; 
    padding-bottom: 50px; 
    font-size: 1em; 
    font-weight: bold; 
    display: inline-block; 
    text-align: left; 
} 

#search form input[type=text]{ 
    width: 170px; 
    height: 30px; 
    float: right; 
    margin-right: 20px; 
    background-color: #C9C8C8; 
    color: #FFFFFF; 
    border: none; 
    outline: none; 
    font-weight: bold; 
    padding-left: 10px; 
    padding-right: 10px; 
} 

#search form input[type=submit]{ 
    width: 200px; 
    height: 35px; 
    background-color: #57BB89; 
    color: #FFFFFF; 
    border: none; 
    outline: none; 
} 

#footer{ 
    width: 100%; 
    height: 130px; 
    background-color: #5C5D5D; 
} 

#footer img{ 
    max-width: 180px; 
    max-height: 40px; 
    display: block; 
    margin: 0 auto; 
    padding-top: 15px; 
} 

#footer p{ 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 0.8em; 
} 

#footer a:link{ 
    text-decoration: none; 
    color: #F48C6B; 
} 

#footer a:visited{ 
    color: #F48C6B; 
} 

#footer a:hover{ 
    color: #00BB89; 
}

источник

2015-10-03 Sauced Apples

Вы можете рассчитать высоту динамически с calc Собственостью.

Просто установите высоту на 100% высоты окна просмотра с 100vh, а затем вычтите высоту нижнего колонтитула (130 пикселей) и заголовка (130 пикселей) = 260 пикселей.

#content{ 
    width: 100%; 
    height: calc(100vh - 260px); 
    min-height: 500px; 
}

Чтобы затем предотвратить его от идти слишком мал, вы можете добавить min-height свойство по своему вкусу.

Demo

источник

2015-10-03 22:39:43 Chris

Потому что он эффективно устанавливает 'position: fixed;', что хорошо на этой странице, но на других, где есть много контента, нижний колонтитул застрял в нижней части браузера, а не на странице. Кроме того, это не помогает заполнить пространство контейнера, просто создает пробел между началом контейнера и нижним колонтитулом. –

Без изменений. –

Нижний колонтитул теперь всегда внизу. Если есть много контента, оно идет в нижней части страницы. Если контент мало, он все равно идет вниз. И не накладывается. Разве это не то, что вы хотели? – Chris

Попробуйте это:

html, body { 
    height: 100%; 
} 

#content { 
    width: 100%; 
    height: 100%; 
}

источник

2015-10-03 22:44:42

Это почти так, накладывает длинный свиток на страницу, около 500 пикселей. Спасибо –

Наносить ниже CSS.

#header{ 
    height: 15vh; 
    overflow: auto; 
} 

#content{ 
    height: 70vh; 
    overflow: auto; 
} 

#footer{ 
    height: 15vh; 
    overflow: auto; 
}

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

источник

2015-10-03 22:49:31

Тот же вопрос, что и другой ответ здесь, он работает, но добавляет примерно 500px v прокрутку на странице –

Я изменил код. Испытайте это, вы можете найти такое своеобразное решение! Хотя, ваш вопрос запутан. –

CSS-контейнер min-height 100%

ответ

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