css div позиционирование и проблема с переполнением, понимание трудного времени

У меня возникли проблемы с пониманием того, почему некоторые из моих DIVs не расширяются до моей высоты «контента» DIV. Он должен быть только css/html.css div позиционирование и проблема с переполнением, понимание трудного времени

VISUAL IMAGE (IMGUR)

ИЕРАРХИЯ

- [+] обертка
---- [-] влево (будет содержать панель навигации)
---- [-] право (используется только для центра «center» div, может иметь контент)
---- [-] center (центр страницы, содержащий контент)
-------- [o] header (будет иметь только небольшую строку текст)
------- - [о] содержание (когда высота переполняется, он должен расширить все другие высоты)
---- [-] сноска (ресурс & контактные ссылки, должны всегда находиться на дне)

CSS

*{ 
     font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
     font-size: 12px; 
     font-style: normal; 
     font-variant: normal; 
     font-weight: 400;  
     border:0px; 
     margin:0px; 
     padding:0px; 
    } 
    .wrapper{ 
     position:absolute; 
     width:100%; 
     height:100%; 
     background-color:black; 
    } 
    .left{ 
     position:absolute; 
     left:0px; 
     width:220px; 
     height:100%; 

     background-color:red; 
    } 
    .right{ 
     position:absolute; 
     right:0px; 
     width:220px; 
     height:100%; 

     background-color:blue; 
    } 
    .center{ 
     position:absolute; 
     right:220px; 
     left:220px; 

     background-color:yellow; 
    } 
    #header{ 
     float:left; 
     height:40px; 
     width:100%; 
     background-color:silver; 
    } 
    #footer{ 
     position:absolute; 
     bottom:0px; 
     height:20px; 
     width:100%; 

     background-color:silver; 
    } 
    #content{ 
     float:left; 
     top:40px; 
     bottom:20px; 
     margin:20px; 

     background-color:orange; 
    }

HTML

<body> 
    <div class="wrapper"> 
     <div class="left"> 
     </div> 
     <div class="right"> 
     </div> 
     <div class="center"> 
      <div id="header"> 
      </div>   

      <div id="content"> 
      </div> 

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

Вот мой jfiddle: JFIDDLE

источник

2016-04-07 John Doe

Любая причина держать '.wrapper' абсолютно позиционированной? – Nitesh

Когда я изучал абсолюты, он сказал, чтобы использовать родственников в обертке и абсолютных для детей. Но когда я помещаю родственника в обертку css, вся страница выпадает из окна. –

установить позицию .wrapper Div в: абсолютной и высоту 100% ;, поэтому она принимает только высоту контейнера, в котором он находится, (что, как работают абсолютно позиционируемые элементы)

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

прогибается будут работать как

.wrapper { 
display: flex; 
} 

.left { 
    flex-grow: 1 
} 
.right { 
    flex-grow: 1 
} 
.content { 
    flex-grow: 3 
}

но вы должны положить колонтитул из обертки или вы можете добавить другой ребенок DIV как

<div class="wrapper"> 

    <div class="main"> 
      <div class="left"></div> 
      <div class="right"></div> 
      <div class="center"></div> 
    <div> 

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

</div>

теперь просто добавить гибкое свойство основных и прогибается расти детей

запомнить гибкую работу на рационах, выше CSS означает .contnet погружение будет принимать 3 раза в ширину .lef или .right DIV

i.e 20% ширина для левой стороны, ширина 20% для правой стороны, ширина 60% для центра,

источник

2016-04-07 12:09:34

Спасибо, я ценю подсказку. Я думал, что использование позиций было более популярным методом на основе всех тем справки, которые я читал. Сегодня вечером я рассмотрю метод flex. Надеюсь, это исправит. Кажется, у меня всегда были проблемы с позиционированием div. –

.row { 
    display: flex; /* equal height of the children */ 
} 

.col { 
    flex: 1; /* additionally, equal width */ 

    padding: 1em; 
    border: solid; 
}

<div class="row"> 
    <div class="col">Lorem ipsum dolor</div> 
    <div class="col">Lorem ipsum dolor sit amet</div> 
</div>

См this link вы получите решение для него, или если вы не хотите использовать CSS затем пойти на JavaScript. См этого JQuery плагин для этой цели - jquery-match-height

источник

2016-04-07 12:00:02

css div позиционирование и проблема с переполнением, понимание трудного времени

ответ

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