我正在创建一个登录页面,上面有一个带有文本的图像。
我的div包含作为图像div的子div的文本,并且图像使用视口高度填充整个屏幕,但是,一旦我在居中的子div中插入文本,由于某种原因,图像会在其中调整大小高度,并且没有多余的滚动空间。我尝试了不同的显示类型以及所有内容。
我举了一个例子,一个带有显示文本的div,另一个没有
具有文本和额外的滚动空间:http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
没有文本,并且图像及其下面的内容之间没有滚动空间:http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
在看到图像结尾(黑框)之前,您会看到文本稍微向上移动(抓住滚轮并缓慢向下拖动),这是因为存在额外的问题。这不会出现在第二个示例中。
最佳答案
通过将#lander_meta
的位置更改为absolute
,添加width:100%
并将其p
标记设置为text-align: center
,使小提琴按预期工作。
Working fiddle。