html - 封面页高度设置为 100% 一半

标签 html css angular bootstrap-4

我一直在尝试实现一个引导封面模板,但我很难设置它。我确实能够从 bootstraps 网站将代码复制到我的代码中,结果封面占据了一半的高度。在样式中,它显然有 height: 100%,但如果我将高度更改为不同的百分比,它根本不会影响它。但是,如果我将高度更改为 740px,它最终会成为我屏幕的相对高度,但这将在未来出现问题。为什么高度百分比不会影响它?

a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 740px;
  background-color: #aaa;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}


/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}


/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, .5);
} 

最佳答案

你可以试试这个

html, body {
    height: 100vh;
    min-height: 100vh;
    background-color: #aaa; 
}

关于html - 封面页高度设置为 100% 一半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51169682/

相关文章:

c# - 注销并重定向到不同区域的主页

css - 按钮宽度自动扩展?

css - 将div放在图像之间

angular - Angular Electron -showOpenDialog typescript 错误?没有与 'OpenDialogOptions'类型相同的属性

JavaScript iframe : accessing http from https

javascript - 我无法从 React JS 获取 ReactDOM.render?

php file_get_contents() 显示页面而不是 html 源代码

html - 后退按钮已禁用内部链接

http - 从 URL 下载文件到用户可访问的位置

Angular - 结合 params 和 queryParams observables