我正在创建一个登录页面,上面有一个带有文本的图像。

我的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

07-28 02:39
查看更多