Question

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

我找不到准确的词来解释这个（我不是原生的），所以这里有一些图片，你可以在调整窗口大小之前和之后看到两个部分（一个是红色，一个是绿色）： enter image description here

我不希望我的部分小于其内容。我该怎么解决这个问题？你怎么解释这种行为？

这是我的完整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 个答案: