Html, Body 100% Высота и динамическая ширина для контента

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

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

HTML:

<body> 
    <div id="navbar"> 
     <ul> 
      <li>Nav 1</li> 
      <li>Nav 2</li> 
      <li>Nav 3</li> 
     </ul> 
    </div> 

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

CSS:

html, body { 
    height:100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#content { 
    height:100%; 
    float:left; 
    /*margin: 0 0 0 200px;*/ 
} 

#navbar{ 
    height:100%; 
    width:200px; 
    float:left; 
}

С этим CSS У меня есть проблема, что мое содержание не правда, поднимающее оставшееся пространство, и если удалить поплавок я получаю вертикальная полоса прокрутки, потому что есть край сверху!

Любые предложения о том, как я могу достичь 100% высоты без полосы прокрутки (без переполнения скрыто, потому что это не удаляет край сверху) и динамической ширины содержимого?

заранее спасибо

EDIT:

Как ни странно он работает с jsfiddle

источник

2013-09-05 makim

насчет скрипку – Itay

@Itay э, скрипка? Как насчет URL? –

вы хотите, чтобы ваш контент div # имел динамическую ширину? – Syd

Вот решение, которое дает вам высоту 100% для содержания, так и навигационной панели:

скрипку: http://jsfiddle.net/92c6M/

HTML

<div id="navbar"> 
    <ul> 
     <li>Nav 1</li> 
     <li>Nav 2</li> 
     <li>Nav 3</li> 
    </ul> 
</div> 

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

CSS

html, body { 
    height:100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#content { 
    height:100%; 
    width: calc(100% - 200px); 
    display: inline-block; 
    background-color: #DDF; 
} 

#navbar{ 
    height:100%; 
    width:200px; 
    float: left; 
    background-color: #CEC; 
}

источник

2013-09-05 13:23:06 fred02138

ничего себе это действительно хорошее решение, не знаю о calc! Это работает со всеми браузерами, например. IE7 или даже 6? – makim

совместимость ie9 + (http://caniuse.com/#feat=calc) –

IE6? Шутки в сторону. Он работает в IE9 +. – fred02138

http://jsfiddle.net/gXubX/2/

.container { 
    width: 100%; 
    background: fuchsia; 
} 

.left { 
    width: 200px; 
    float: left; 
    background: purple; 
    min-height: 300px; 
}

И в clearfix применяется к контейнеру.

источник

2013-09-05 12:29:32

Эй вы можете мне немного объяснить, что такое clearfix? –

[clearfix] (http://www.webtoolkit.info/css-clearfix.html) –

Я пробовал ваше предложение, но у меня все еще есть запас сверху, а теперь и внизу внизу http://jsfiddle.net/ tqEfS/1/ – makim

CSS:

#wrapper { 
width: 100%; 
float: left; 
positon: relative; 
} 

#navbar { 
width: 200px; 
float: left; 
top: 0px; 
left: 0px; 
position: absolute; 
    height: 300px; 
background-color: red; 
z-index: 2; 
} 

    #content-wrapper { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 300px; 
float: left; 
background-color: blue; 
z-index: 1; 
} 

    #content { 
left: 200px; 
margin-left: 200px; 
background-color: green; 
z-index: 3; 
color: white; 
}

HTML

<div id="wrapper"> 
<div id="navbar"></div> 
<div id="content-wrapper"> 
    <div id="content"> 
     asdfasfdasdfasdg asdga sdgasdg asdgasdgasdgasdg 
    </div> 
</div> 
</div>

источник

2013-09-05 12:32:58 q0re

Я не хочу, чтобы навигатор был динамическим, он должен иметь фиксированную ширину – makim

, он правильно установлен выше;) – q0re

близко, но это ведет к горизонтальной полосе прокрутки: -/ – makim

Html, Body 100% Высота и динамическая ширина для контента

ответ

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