將div元素縮放到窗口大小

Question

我目前正在爲一個新的Web應用程序工作skeleton layout，但在CSS佈局和DIV中遇到了一些最明顯的問題。

1）方框1和2（第1列）與3（第2列）和4（第3列）不對齊。我怎樣才能理清這一點？

2）我真的很喜歡界面here，當最小化到一定大小時會自動調整大小，並在窗口最大化時自動調整大小。我一直試圖將這個實現到我的佈局，但不能。不幸的是，頁腳如何「突出」。我希望一切都適合一個頁面。如何在上述網站上實現此目標？

非常感謝提前。

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套利潤率的2周的div在第1列。你在第2列有1個div，所以只有一組保證金，所以自然，第1列將長於你使用的保證金。我可以提供的最好解決方法是在底部添加10px的填充。這應該趕上第一列的利潤率。

2）添加最小和最大寬度，然後將寬度設置爲％。假設100px min，最大300px，寬度爲50％。只要屏幕寬度爲200像素到600像素，寬度將爲50％，否則將會在指定的限制內。