CSS - 2 열 레이아웃

Question

너비가 100 %이고 헤더의 너비가 100 % 여야하며 왼쪽에있는 탐색 바를 사용하여 2 열 액체 레이아웃을 만들고 싶습니다. 높이와 너비가 100 %이고, 모든면에 10 또는 20 픽셀의 여백이 있어야하며 헤더, 콘텐츠 상자 및 콘텐츠 상자 사이에도 여백이 있어야합니다. 당신이 탐색 모음은 높이가 100 %되지 않으며 컨텐츠 섹션이 너무 넓 볼 수 있듯이 이제

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; 
} 

: 여기 내 바이올린입니다. 내 최종 결과는 다음과 같아야합니다

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

이 문제에 구글에 대한 도움말을 찾는 시도하지만, 난 여전히 내가 사용 상대 또는 절대 위치와있는 어떤 속성에 사용 해야하는지하지 않습니다. 어떤 포인터?

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을 배치 할 수 있습니다. 아래에서 아이디어를 얻으십시오.

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/