Prevent div from going smaller than its content when resizing

Question

I'm currently designing my own website. The global aspect seems quite fine to me, except one thing : when I resize my browser's window (to check the result whith tinier displays), my sections go smaller than their content.

I can't find the accurate words to explain this (I'm not a native), so here's some pictures on which you can see two sections (one in red and one in green) before and after resizing my window: 在此处输入图片说明

I don't want my sections to be smaller than their content. How should I fix this ? How do you explain this behavior ?

Here is my full 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>

And here is my 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;
}

You can check it live at the following URL : reduce you browser window's height.

Regards

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>

Prevent div from going smaller than its content when resizing

Question

1 answers

solution1
0 ACCPTED 2015-01-18 23:43:12

Prevent div from going smaller than its content when resizing

Question

1 answers

solution1 0 ACCPTED 2015-01-18 23:43:12

solution1
0 ACCPTED 2015-01-18 23:43:12