Question

我正在创建一个着陆页，其中包含带有文字的图片。

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

在看到图像的结尾（黑匣子）之前，你会看到文字向上移动一点（抓住滚轮并慢慢向下拖动），这是因为额外的问题。这不会出现在第二个例子中。

Answer 1

通过将#lander_meta的排名更改为absolute，添加width:100%并制作p代码text-align: center，让您的小提琴按预期工作。

Working fiddle

导致div增加大小的文本

1 个答案: