将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％，否则将会在指定的限制内。