Question

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

Answer 1

@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>

Answer 2

问题：

100％阻止.intro部分 - 应覆盖整个容器加上你下面还有一些额外的文字 - 不清楚thext应该去哪里。 100％以上的东西？

解决方案：

将其他文字移到.intro部分：

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>
<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', 
</p>
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>
</section>
   </body>
   </html>

Answer 3

您的代码会对视频中显示的内容产生相同的结果。你的“100％高度问题”究竟是什么？

我相信你的解决方案是耐心并继续关注......

在＆＃34; html＆＃34;上设置100％的高度元素不起作用......

3 个答案: