CSS - 2 Column Layout

Question

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

https://jsfiddle.net/d2Lnq6sd/1/

header { 
    position: relative; 
    height: 75px; 
    width: 100%; 
    background-color: red; 
    border: 1px solid black; 
} 

nav { 
    position: relative; 
    top: 20px; 
    left: 0px; 
    height: 100%; 
    width: 200px; 
    padding: 10px; 
    background-color: blue; 
    border: 1px solid black; 
} 

section { 
    position: absolute; 
    top: 110px; 
    left: 240px; 
    width: 100%; 
    background-color: green; 
    border: 1px solid black; 
} 

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

http://imageshack.com/a/img921/9425/UYp8Ah.png

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

Answer 1

Вы хорошо идти: http://codepen.io/8odoros/pen/vKxVYv?editors=1100

• нав бар в высоту 100%
• раздел содержание не слишком широкий

html, body { 
 
    height:calc(100% - 60px); 
 
} 
 
body { 
 
    font-family: verdana; 
 
    color: #fff; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    height:100%; 
 
    box-sizing:border-box; 
 
} 
 

 
header { 
 
    float:left; 
 
    height: 75px; 
 
    width: 100%; 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    box-sizing:border-box; 
 
} 
 
nav { 
 
    float:left; 
 
    margin-top:20px; 
 
    height: 100%; 
 
    width: 200px; 
 
    padding: 10px; 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    box-sizing:border-box; 
 
} 
 

 
section { 
 
    float:right; 
 
    margin-top:20px; 
 
    height:100%; 
 
    padding: 10px; 
 
    width:calc(100% - 220px); 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    box-sizing:border-box; 
 
}

<div class="container"> 
 

 
    <header> 
 
     This is the header 
 
    </header> 
 
    
 
    <nav> 
 
     This is the nav 
 
    </nav> 
 

 
    <section> 
 
     This is the main section 
 
    </section> 
 
</div>

Answer 2

Вы можете разместить навигацию как фиксированную, использовать ниже, чтобы получить представление.

nav { 
    position: fixed; 
    top: 20px; 
    left: 0px; 
    height: 100%; 
    width: 200px; 
    padding: 10px; 
    background-color: blue; 
    border: 1px solid black; 
    margin-top: 76px; 
} 

Answer 3

Хорошо поэтому я изменил несколько вещей:

https://jsfiddle.net/d2Lnq6sd/9/

body,html { 
    height:100%; 
} 

body { 
    font-family: verdana; 
    color: #fff; 
} 

.container { 
    position: relative; 
    margin: 10px; 
    padding: 10px; 
    width: 73%; 
    float: left; 
    height:auto; 
} 

header { 
    position: relative; 
    height: 75px; 
    width: 100%; 
    background-color: red; 
    border: 1px solid black; 
} 

aside { 
    float:left; 
    width:20%; 
    margin-top:15px; 
    margin-left:5px; 
    height: 100%; 
    background-color: blue; 
    border: 1px solid black; 
} 

section { 
    width: 100%; 
    background-color: green; 
    border: 1px solid black; 
} 

Я переместил навигации в стороне тег, это просто HTML 5 синтаксиса Link

С помощью поплавков и сохранения позиций, как они были, вы можете создать желаемый эффект. Чтобы получить ширину до 100%, я бы рекомендовал играть с заполнением и полями, чтобы получить коэффициент 20% + 80%.

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

Answer 4

Попробуйте этот код и посмотреть демо:

CSS:

body { 
    color: #fff; 
    font-family: verdana; 
} 
header { 
    background-color: red; 
    border: 1px solid black; 
    height: 75px; 
    width: 100%; 
} 
nav { 
    background-color: blue; 
    border: 1px solid black; 
    float: left; 
    margin: 2% 0; 
    min-height: 300px; 
    padding: 10px; 
    width: 20%; 
    height: 100%; 
} 
section { 
    background-color: green; 
    border: 1px solid black; 
    float: right; 
    position: absolute; 
    right: 10px; 
    top: 100px; 
    width: 75%; 
} 

См Fiddle Demo

Answer 5

Do you need like this , 

Html: 
<div class="container"> 

    <header> 
     This is the header 
    </header> 

    <nav> 
     This is the nav 
    </nav> 

    <section> 
     This is the main section 
    </section> 

</div> 
Css: 
body { 
    font-family: verdana; 
    color: #fff; 
} 

.container { 
    position: relative; 
    margin: 10px; 
    padding: 10px; 
} 

header { 
    position: relative; 
    height: 75px; 
    width:675px; 

    background-color: red; 
    border: 1px solid black; 
} 

nav { 
    position: relative; 
    top: 20px; 
    left: 0px; 
    height: 300px; 
    bottom:200px; 
    width: 200px; 
    padding: 10px; 
    background-color: blue; 
    border: 1px solid black; 
} 

section { 
    position: absolute; 
    top: 110px; 
    left: 240px; 
    width: 100%; 
    background-color: green; 
    border: 1px solid black; 
} 



you can see the link:https://jsfiddle.net/d2Lnq6sd/11/