Страница не будет расширяться с помощью DIV

Я пытаюсь создать страницу, которая изменит размер с моим основным content div. В настоящее время, когда я устанавливаю свой content div на height: 1000px, он работает над моими нижними div. Как изменить это, чтобы он расширялся с моим content div?Страница не будет расширяться с помощью DIV

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Layout</title> 
    <link rel="stylesheet" type="text/css" href="../styles/layout.css"> 
</head> 
    <body> 
    <div class="top"> 
    </div> 
     <div class="left"> 

     </div> 
     <div class="right"> 

      <div class="content"> 
       <h1>Page Content</h1> 
      </div> 
     </div> 
     <div class="preFooter"> 

     </div> 
     <div class="myFooter"> 

     </div> 
    </body> 
</html>

CSS:

*{ 
    margin-left: 0; 
    margin-right: 0; 

    margin-top: 0; 
    margin-bottom: 0; 
} 

html,body { height:100%; } 

h1{ 
    text-align: center; 
    padding: 5px; 
} 

.left{ 
    float: left; 
    width: 20%; 
    background-color: #757475; 
    height: 100%; 
} 

.right{ 
    float: right; 
    width: 80%; 
    background-color: #e9eaed; 
    height: 100%; 
} 

.top{ 
    overflow : hidden; 
    height: 10%; 
    background-color: #333333; 
    width: 100%; 
} 

.preFooter{ 
    overflow : hidden; 
    height: 20%; 
    background-color: #ffffff; 
    width: 100%; 
} 

.myFooter{ 
    overflow: hidden; 
    height: 40%; 
    background-color: #333333; 
    width: 100%; 
} 

.content{ 
    margin-top: 5%; 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: white; 
    height: 1000px; 
    border-radius: 25px; 
}

источник

2015-03-22 ChaseHardin

Не устанавливайте высоту до .left и .right. Таким образом, содержимое будет определять, насколько высок элемент.

Here's a JSFiddle.

Причина она не заполняет всю высоту страницы, потому что другие элементы страницы (содержание дел) имеют фиксированную высоту устанавливается на 1000 пикселей. Вам также нужно было бы сделать то, что сказал Роб, и использовать clearfix, или всплывать все вместе, и использовать flexbox, который является новым и отличным! Смотрите вторую ссылку ниже:

Here's another. I started this from scratch, maybe it will seem more straight forward this way.

источник

2015-03-22 03:56:58 Dustin

как бы я добавить цвет фона в '.right' DIV? У меня есть назначенный цвет, но это не работает. – ChaseHardin

Фоновый цвет для '.rigtht' всего лишь около 3/4 пути вниз. – ChaseHardin

Самый простой способ, который я могу придумать, - установить его положение на фиксированное и установить его с помощью единиц видового экрана. Высота, заданная в процентах, требует некоторого обмана, и если вы просто учитесь, лучше всего использовать их для начала. Проверьте скрипту снова, я обновил ее. – Dustin

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

источник

2015-03-22 03:55:27 Rob

Страница не будет расширяться с помощью DIV

ответ

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