div 요소를 창 크기에 맞게 조정하십시오.

Question

현재 웹 응용 프로그램의 경우 skeleton layout에서 작업하고 있지만 CSS 레이아웃과 DIV에서는 몇 가지 문제가 가장 많이 발생했습니다.

1) 상자 1과 2 (열 1)는 3 (열 2)과 4 (열 3)와 일치하지 않습니다. 어떻게 이것을 바로 잡을 수 있습니까?

2) 나는 인터페이스가 얼마나 특정 크기로 최소화 될 때 자동으로 크기가 조절되고 창을 최대화 할 때 비례하는지 인터페이스가 얼마나 좋은지 잘 알고 있습니다. 나는 이것을 레이아웃으로 구현하려했지만 그렇게 할 수는 없다. 꼬리말이 어떻게 튀어 나오는지는 불행한 일입니다. 한 페이지에 모든 것을 넣고 싶습니다. 위에서 언급 한 웹 사이트에서와 마찬가지로이 목표를 달성하려면 어떻게해야합니까?

미리 감사드립니다.

HTML :

<!-- 
============================================ 
LOGO 
============================================ 
--> 

<div id="wrapper"> 
    <div class="logo">logo</div> 

<!-- 
============================================ 
NAVBAR 
============================================ 
--> 

<div id="header"> 
    <a href="#">link 1</a> 
    &nbsp;|&nbsp; 
    <a href="#">link 2</a> 
    &nbsp;|&nbsp; 
    <a href="#">link 3</a> 
    &nbsp;|&nbsp; 
    <a href="#">link 4</a> 
</div> 

    <div style="clear: both;"></div> 

<!-- 
============================================ 
NAVIGATION & CONTACTS 
============================================ 
--> 

<div class="column" id="first-column"> 
    <div class="window" id="window-1">1</div> 
    <div class="window" id="window-2">2</div> 
</div> 

<!-- 
============================================ 
MAIN CONTENT 
============================================ 
--> 

<div class="column" id="second-column"> 
    <div class="window" id="window-3">3</div> 
</div> 

<!-- 
============================================ 
CHAT 
============================================ 
--> 

<div class="column" id="third-column"> 
    <div class="window" id="window-4">4</div> 
</div> 

<!-- 
============================================ 
FOOTER 
============================================ 
--> 

     <div style="clear: both;"></div> 
     <div class="footer">footer</div> 
</div>​ 

CSS :

/* 
============================================ 
GENERAL 
============================================ 
*/ 

body, html{ 
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif; 
    height: 100%; 
} 

/* 
============================================ 
LAYOUT SKELETON 
============================================ 
*/ 

#wrapper { 
    margin: 0 auto; 
    max-width: 1212px; 
    min-height: 540px; 
    min-width: 784px; 
    position: relative; 
    height: 100%; 
} 

#header{ 
    text-align:right; 
    padding:5px; 
    font-size:10px; 
    padding-right: 30px; 
} 

#first-column{ 
    width: 20%; 
    padding-left: 5px; 
    height: 100%; 
} 

#second-column{ 
    width: 50%; 
    height: 100%; 
} 

#third-column{ 
    width: 25%; 
} 

.window{ 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border:1px solid #CECECE; 
    width:100%; 
} 

#window-1{ 
    height:50%; 
} 

#window-2{ 
    margin-top:10px; 
    height:50%; 
} 

#window-3{ 
    height: 100%; 
} 

#window-4{ 
    height:100%; 
} 

.column{ 
    float:left; 
    margin: 5px; 
    height: 100%; 
} 

.logo { 
    font-family: arial; 
    font-size: 12px; 
    float: left; 
    padding-left: 10px; 
} 

.footer { 
    margin-top: 10px; 
    padding-left: 10px; 
} 

Answer 1

1) 50 % 높이 마진 그래서 2 세트에서 열 1 2 명 div가 있습니다. 2 열에 1 div가 있으므로 여백이 1 세트이므로 당연히 1 열은 사용하는 여백만큼 길어집니다. 내가 해결할 수있는 최선의 방법은 바닥에 10px의 패딩을 추가하는 것입니다. 이것은 첫 번째 열 여백을 따라 잡아야합니다.

2) 최소 너비와 최대 너비를 더한 다음 너비를 %로 설정하십시오. 100px 분, 300px 최대 및 50 % 너비라고 말합니다. 화면의 너비가 200px에서 600px이면 50 %가됩니다. 그렇지 않으면 지정된 제한에 도달하게됩니다.