html - 在 "html"元素上设置 100% 高度不起作用...

标签 html css dreamweaver

我有这个 100% 高度探测器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dreamweaver Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<section class="intro">
<div class="inner">
<div class="content">
<h1>Breath Easy</h1>
<a class="btn" href="#">Get Started</a>
</div>

</div>

</section>

<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', 
a page when looking at its layout. The point of using Lorem Ipsum is that it 
   has a more-or-less normal distribution of letters, as opposed to using 
'Content here, content here', 
</p>

   </body>
   </html>

这是CSS

@charset "utf-8";
/* CSS Document */


@import url{'https://fonts.googleapis.com/css?family=Raleway'};
@import url{'https://fonts.googleapis.com/css?family=Oswald'};

html,body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro{
height: 100%;
width: 100%;
background: #DF1E21;
}

为什么它不显示全高。顺便说一句,我正在关注这个教程视频 https://www.youtube.com/watch?v=Y5SHm53WFEk&index=2&list=PLzSW4vYtPmwL4c2XB5kFMWNM8ABNvYArX

最佳答案

@import 字体文件中存在语法错误,将 {} 替换为 () 分别。

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');

工作 fiddle

@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');

html,body {
  margin:0;
  padding:0;
  height:100%;
  
}

.intro {
  margin:0;
  padding:0;
  height:100%;
  background:gold;
  overflow:auto;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dreamweaver Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<section class="intro">
<div class="inner">
<div class="content">
<h1>Breath Easy</h1>
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
</body>
</html>

关于html - 在 "html"元素上设置 100% 高度不起作用...,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46482512/

相关文章:

php - 网站上的个性化 RSS 源

css - safari:flexbox 和 extra margin

javascript - DataTables - 最后一列固定宽度

php - 具有 "template"功能和 JQuery 和 PHP 视觉帮助的 Dreamweaver 的替代品

html - 链接中带有 CSS 的垂直文本

html - 如何在适用于 Outlook 2007 的 HTML 电子邮件中执行背景重复?

php - Dreamweaver 无法保存 php 文件?

javascript - 有没有办法查看元素是否可见、可点击?

html - 为什么 CSS 过渡不能用于字体粗细?

php - $_FILES 中的某些键为空