調整大小時防止div小於其內容

Question

我目前正在設計自己的網站。 全局方面對我來說似乎還不錯，除了一件事：當我調整瀏覽器窗口的大小（以檢查顯示結果是否較小時）時，我的部分比其內容小。

我找不到准確的字詞來解釋這一點（我不是母語人士），因此在下面的圖片上，您可以在調整窗口大小前后看到兩個部分（一個為紅色，一個為綠色）：在此處輸入圖片說明

我不希望我的欄目小於其內容。 我該如何解決？ 您如何解釋這種行為？

這是我的完整html：

<!DOCTYPE HTML>
<html>
<head>
    <title>Frédéric Woelffel - Portfolio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="img/favicon.png">
    <link rel="stylesheet" href="/css/normalize.css"/>
    <link rel="stylesheet" href="/css/foundation.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/js/vendor/modernizr.js"></script>
</head>
<body>          

    <section class="fullheight fullwidth" id="whoami">
        <div class="vcenter">
            <div class="row">
                <div class="large-12 columns end text-center">
                    <h1>Frédéric Woelffel</h1>
                    <h2>Elève ingénieur en informatique</h2>
                </div>
            </div>
        </div>
    </section>  

    <section class="fullheight fullwidth" id="maintenance">
        <div class="vcenter opacity-white-80">
            <div class="row">
                <div class="large-12 columns end text-center">
                    <h1>Maintenance</h1>
                    <h2>Mon portfolio est actuellement en construction</h2>
                </div>
            </div>
        </div>
    </section>


    <section class="fullwidth" id="footer">
        <div class="row fullheight">
            <div class="large-12 columns">
            </div>
        </div>
    </section>

    <script src="/js/vendor/jquery.js"></script>
    <script src="/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>

</body>
</html>

這是我的CSS：

@import url(http://fonts.googleapis.com/css?family=Lato:400,900|Source+Code+Pro);
/* font-family: 'Lato', sans-serif; */
/* font-family: 'Source Code Pro', ; */

h1
{
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-variant: small-caps;
}

h2
{
    font-weight: 200;
    font-size: xx-large;
}

.fullheight
{
    min-height: 100%;
    position: relative;
}

.fullwidth
{
    width: 100%;
}

.vcenter
{
    width: inherit;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}


.opacity-white-80
{
    background: rgba(236, 240, 241,0.8);
    padding: 50px;
    border-radius: 3px;
}

/*
    WHO AM I
*/

#whoami
{
    background: black;
    color: white;
}

#whoami h1
{
    color: #ecf0f1;
}

#whoami h2
{
    color: #bdc3c7;
}

/*
    MAINTENANCE
*/

#maintenance
{
    background-image: url('/img/lego-workers.jpg');
}

/*
    FOOTER 
*/

#footer
{
    min-height: 20%;
    background: black;
    color: #ecf0f1;
}

您可以通過以下URL進行實時檢查：降低瀏覽器窗口的高度。

問候

Answer 1

 @import url(http://fonts.googleapis.com/css?family=Lato:400,900|Source+Code+Pro); /* font-family: 'Lato', sans-serif; */ /* font-family: 'Source Code Pro', ; */ h1 { font-family: 'Lato', sans-serif; font-weight: 900; font-variant: small-caps; } h2 { font-weight: 200; font-size: xx-large; } .fullheight { min-height: 100vh; position: relative; } .fullwidth { width: 100%; } .vcenter-wr { display: table; height: 100%; height: 100vh; width: 100%; vertical-align: middle; } .vcenter { display: inline-block; /* IE7 */ display: table-cell; vertical-align: middle; } .opacity-white-80 { background: rgba(236, 240, 241,0.8); padding: 50px; border-radius: 3px; } /* WHO AM I */ #whoami { background: black; color: white; } #whoami h1 { color: #ecf0f1; } #whoami h2 { color: #bdc3c7; } /* MAINTENANCE */ #maintenance { background-image: url('http://fredericwoelffel.com/img/lego-workers.jpg'); } /* FOOTER */ #footer { min-height: 20vh; background: black; color: #ecf0f1; }

 <!DOCTYPE HTML> <html> <head> <title>Frédéric Woelffel - Portfolio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="icon" type="image/png" href="img/favicon.png"> <link rel="stylesheet" href="http://fredericwoelffel.com/css/foundation.css"/> <link rel="stylesheet" href="http://fredericwoelffel.com/css/foundation.css"/> <script src="http://fredericwoelffel.com/js/vendor/modernizr.js"></script> </head> <body> <section class="fullheight fullwidth" id="whoami"> <div class="vcenter-wr"> <div class="vcenter"> <div class="row"> <div class="large-12 columns end text-center"> <h1>Frédéric Woelffel</h1> <h2>Elève ingénieur en informatique</h2> </div> </div> </div> </div> </section> <section class="fullheight fullwidth" id="maintenance"> <div class="vcenter-wr"> <div class="vcenter"> <div class="opacity-white-80"> <div class="row"> <div class="large-12 columns end text-center"> <h1>Maintenance</h1> <h2>Mon portfolio est actuellement en construction</h2> </div> </div> </div> </div> </div> </section> <section class="fullwidth" id="footer"> <div class="row"> <div class="large-12 columns"> </div> </div> </section> <script src="http://fredericwoelffel.com/js/vendor/jquery.js"></script> <script src="http://fredericwoelffel.com/js/foundation.min.js"></script> <script>$(document).foundation();</script> </body> </html>

調整大小時防止div小於其內容

問題描述

1 個解決方案

解決方案1
0 已采納 2015-01-18 23:43:12

調整大小時防止div小於其內容

問題描述

1 個解決方案

解決方案1 0 已采納 2015-01-18 23:43:12

解決方案1
0 已采納 2015-01-18 23:43:12