Создание две колонок-100% макета с Bootstrap

поэтому я пытаюсь создать макет с Twitter Bootstrap и липким сноской Райана свершившейся вСоздание две колонок-100% макета с Bootstrap

<body> 
<div class="wrapper"> 
    <div class="header"> 
</div> 
    <div class="user-panel"> 
    <h1>Side Panel</h1> 
</div> 

    <div class="content"> 
     Hello World! 
    </div> 

    <div class="push"></div> 
</div> 
<div class="footer"> 
</div> 
</body>

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

http://www.sitepoint.com/forums/showthread.php?868712-100-height-sidebar-background

http://fiddle.jshell.net/teresko/UG8Rk/show/мне нужно закругленные границы так ...

Вот CSS ...

 
/* Header */ 
.header { 
    height: 40px; 
    margin-top: 0px; 

    border: 1px solid #999; 
    -webkit-border-radius: 0px 0px 5px 5px; 
    -moz-border-radius: 0px 0px 5px 5px; 
    border-radius: 0px 0px 5px 5px; 
    -webkit-box-shadow: #666 0px 1px 1px; 
    -moz-box-shadow: #666 0px 1px 1px; 
    box-shadow: #666 0px 1px 1px; 
    background: #F3F3F1; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B)); 
    background: -webkit-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -moz-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -ms-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -o-linear-gradient(#F3F3F1, #2B2B2B); 
    background: linear-gradient(#F3F3F1, #2B2B2B); 
    -pie-background: linear-gradient(#F3F3F1, #2B2B2B); 
    behavior: url(/PIE.htc); 
} 
/* End of Header */ 

/* Footer */ 
.footer { 
    margin-top: 12px; 
    background-color: #000; 

    margin-bottom: 0px; 
    margin-right: 20px; 
    margin-left: 20px; 
    clear: both; 
    height: 40px; 
    border: 1px solid #999; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    -moz-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
    -webkit-box-shadow: #666 0px 1px 1px; 
    -moz-box-shadow: #666 0px 1px 1px; 
    box-shadow: #666 0px 1px 1px; 
    background: #F3F3F1; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B)); 
    background: -webkit-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -moz-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -ms-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -o-linear-gradient(#F3F3F1, #2B2B2B); 
    background: linear-gradient(#F3F3F1, #2B2B2B); 
    -pie-background: linear-gradient(#F3F3F1, #2B2B2B); 
    behavior: url(/PIE.htc); 
} 
/* End of Footer */ 

/* Sticky footer by Ryan Fait... with a little customization*/ 
* { 
    margin: 0; 
} 

html,body { 
    height: 100%; 
} 

.wrapper { 
    padding-left: 20px; 
    padding-right: 20px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 

.push { 
    height: 40px; 
    clear: both; 
} 
/* End of Sticky footer*/ 

/* User Panel (that sidepanel on the left side with navigation etc) */ 
.user-panel { 
    border: 1px solid #999; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
    -webkit-box-shadow: #666 0px 1px 1px; 
    -moz-box-shadow: #666 0px 1px 1px; 
    box-shadow: #666 0px 1px 1px; 
    background: #F3F3F1; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B)); 
    background: -webkit-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -moz-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -ms-linear-gradient(#F3F3F1, #2B2B2B); 
    background: -o-linear-gradient(#F3F3F1, #2B2B2B); 
    background: linear-gradient(#F3F3F1, #2B2B2B); 
    -pie-background: linear-gradient(#F3F3F1, #2B2B2B); 
    behavior: url(/PIE.htc); 
    width: 175px; 
    float: left; 
    height: inherit; 
    background: gray; 
} 
/* End of User Panel */

Любая помощь приветствуется ... спасибо ...

EDIT:

Благодаря Андреа Ligios для скрипки!

http://jsfiddle.net/RPFcN/2/

хорошо работает с Firefox, но не работает на Chrome ...

источник

2012-10-30 Kevin D.

Привет Привет Доброе утро !, Кевин место этот код внутри элемента боковой панели

display: block; 
position:absolute; 
height:auto; 
bottom:0; 
top:0;

Надеюсь, что это помогает :)

источник

2012-10-31 01:57:34 TheFrustratedProgrammer

Привет, доброе утро, мой любимый офицер со всего моего куба. Спасибо ... Я скорректировал некоторые значения для учета высоты заголовка и нижнего колонтитула. Это работает, спасибо. –

добавить display:inline-block к .user-panel и .wrapper

источник

2012-10-30 10:47:02

Не работает:/извините. –

Вы можете использовать известково() функцию CSS3.

Посмотрите здесь: http://jsfiddle.net/RPFcN/2/

Вы указываете display: inline-block держать блоки отображаются в строке, но с поведением элементов блока;

Затем вы устанавливаете height из user-panel на 100% за вычетом высоты верхнего и нижнего колонтитулов, их полей и границ (всего: 98 пикселей).

Высота «контента» будет 100% минус 94px, поскольку контент не имеет границ (в то время как пользовательская панель имеет 1px границ).

EDIT: и удалить height: auto !important из класса-оболочки

источник

2012-10-30 12:55:10

хорошо работает с Firefox, боковой панелью и контентом не все еще на 100% высотой в Chrome ...Кроме того, есть ли другой способ сделать это без использования CSS3? –

Как я использовал эту работу ...

HTML:

<footer> 
    <div class="container"> 
    <p class="text-muted">Footer text you want here.</p> 
    </div> 
</footer>

CSS:

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin-bottom: 8em; /* Must be set to the same as footer height */ 
} 
footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 8em; /* Must be set at the same as margin-bottom in body */ 
}

источник

2016-01-06 00:10:03

Создание две колонок-100% макета с Bootstrap

ответ

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