Question

我将网站创建为项目并遇到有关标题的问题。基本上，标题的高度设置为浏览器窗口的50％，但是，它看起来只有标题内的内容（2个标题）。

我已将此网站上传至here

HTML

<header role="banner" id="banner">
    <div class="not-fullscreen background bgheader1"" data-img-width="1600" data-img-height="1064">
        <div class="content-a">
            <div class="content-b">
                <h1>Manchester Metropolitan University</h1>
                <h2>Course Information</h2>
            </div>
        </div>
    </div>
</header>

CSS -

header {
    min-height:50%;
    height:50%;
    width:100%;
}
.fullscreen,
.content-a {
    width:100%;
    min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
    height:100%;
    overflow:hidden;
    min-height:50%;
}

/* content centering styles */
.content-a {
    display:table;
        height:50%;
}
.content-b {
    display:table-cell;
    position:relative;
    vertical-align:middle;
    text-align:center;
}

其他信息可以从网站上提取任何帮助将不胜感激

感谢。

编辑 - 它必须与bootstraps粘贴页脚/固定导航一起使用。虽然html / body身高确实可以修复它，但它也会让页脚变得混乱。

Answer 1

为html和body元素定义100％的高度：

html, body {
  height: 100%;
}

Answer 2

默认情况下，正文仅占用其中内容的高度，除非该内容超过窗口的高度，在这种情况下，它会溢出并获得滚动条。

使用height，你需要让你的身体占据窗口的100％，即使没有/很少的内容：

html, body{
    height: 100%;
}

JSFiddle

标题背景不继承设置高度

2 个答案: