我目前正在设计自己的网站。 全局方面对我来说似乎很好，除了一件事:当我调整浏览器窗口的大小时(以检查更小的显示结果)，我的部分变得比它们的内容小。
我找不到准确的词来解释这个(我不是本地人)，所以这里有一些图片，您可以在调整窗口大小之前和之后看到两个部分(一个红色和一个绿色):
我不希望我的版 block 比它们的内容小。我应该如何解决这个问题？您如何解释这种行为？
这是我的完整 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查看直播: 降低浏览器窗口的高度。
问候
最佳答案
@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>关于html - 防止 div 在调整大小时小于其内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28015964/