防止 div 在调整大小时小于其内容

Question

我目前正在设计自己的网站。全局方面对我来说似乎很好，除了一件事：当我调整浏览器 window 的大小时（以检查更小的显示结果），我的部分比它们的内容小。

我找不到准确的词来解释这个（我不是本地人），所以这里有一些图片，你可以看到调整大小前后的两个部分（一个红色和一个绿色） window:

我不希望我的版块比它们的内容小。我应该如何解决这个问题？你如何解释这种行为？

这是我的完整 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 现场查看：降低浏览器window 的高度。

此致

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 在调整大小时小于其内容

Prevent div from going smaller than its content when resizing

html

css

height