【DAY17】新手常遇到的問題：遇到不唯一解時，不知道還有更棒的方法。（多看、多問）

2018 iT 邦幫忙鐵人賽

DAY 17

Modern Web

勇者Jason和前端之鑰系列第 17 篇

【DAY17】新手常遇到的問題：遇到不唯一解時，不知道還有更棒的方法。（多看、多問）

2018鐵人賽

JasonYang

團隊Lorem100+tab

2018-01-05 22:16:09

1879 瀏覽

分享至

知道為什麼昨天要介紹flexbox嗎？
和今天是有關聯的！

當我在切第二個版的時候，
雖然拿到的圖是一欄式的，
但是我想要切切看兩欄式，
所以就發現了一些問題。
兩欄不等高

因此我想到了一個方法，
還記得我在介紹box model的margin和padding時，
有說過它們跟背景色的關係嗎？

margin不會吃到背景色padding會，
我們就先用這個來試試看兩欄等高吧！

首先我們先寫出兩欄不等高的環境來。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flexbox</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <header>
        <div>I'm header.</div>
    </header>
    <div class="container">
        <aside>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
        </aside>
        <div class="content">
            <div>I'm content</div>
            <div>I'm content</div>
            <div>I'm content</div>
            <div>I'm content</div>
            <div>I'm content</div>
        </div>
    </div>
    <footer>
        <div>I'm footer</div>
    </footer>
</body>
</html>

style.css

header{
    background-color: blue;
    width:100%;
    min-height:70px;
}
aside{
    background-color: red;
    width:30%;
    float:left;
}
.content{
    background-color: green;
    width:70%;
    float: right;
}
.container::after{
    content:"";
    clear: both;
    display: block;
}
footer{
    background-color: blueviolet;
    width:100%;
}

如圖，原本都很正常，
直到我拿掉一個I'm content，
就變成這樣：

我想到的解法是在css增加語法如下：

.container{
    overflow: hidden;
}
.content{
    margin-bottom:-3000px;
    padding-bottom: 3000px; 
}

這樣就完成兩欄等高了。
其中正margin-bottom、負padding-bottom
要下在較短的那欄。

但是自己這樣下，自己都覺得不滿意，感覺就很怪。
如果超過3000px，那不就要一直再加長？
因此又向A同學求助。
A同學：「我會用flexbox！」
因此，來試看看flexbox吧！

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flexbox</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <header>
        <div>I'm header.</div>
    </header>
    <div class="container">
        <aside>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
            <div>I'm aside.</div>
        </aside>
        <div class="content">
            <div>I'm content</div>
            <div>I'm content</div>
            <div>I'm content</div>
            <div>I'm content</div>
        </div>
    </div>
    <footer>
        <div>I'm footer</div>
    </footer>
</body>
</html>

我們把float跟清除浮動拿掉，並在.container加入display: flex;，
style.css

header{
    background-color: blue;
    width:100%;
    min-height:70px;
}
.container{
    display: flex;
}
aside{
    background-color: red;
    width:30%; 
}
.content{
    background-color: green;
    width:70%;
}
footer{
    background-color: blueviolet;
    width:100%;
}