Question

我是html和css的新手，大概只在一周前开始。但是我有一些问题，无论我在哪个显示器上观看网站，我的页面宽度都适合屏幕。我已经尝试了background-size: cover;，width: 100%;等等。我知道有一些我没有想到的东西。

其次，这可能听起来很愚蠢，有没有办法在没有内容的情况下添加页面长度？

很抱歉，如果这些是简单的问题，我一直在寻找答案。以下是我的代码，如果有人有任何有助于单页设计的建议，请告诉我！

谢谢！

HTML

<!doctype html>
<a name="totop" />
<head>

  <meta charset="utf-8">

  <title> Jack Johnson</title>

  <!-- Import CSS Stylesheets Here -->
  <link rel="stylesheet" type="text/css" href="file:///C:/users/Jack/desktop/projects/mysitecss.css">
  <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:100' rel='stylesheet' type='text/css'>

</head>

<body>

<div id="first-page">

  <p class="header">Jack Johnson</p>
  <p class="subheader">Marketing and Design Specialist</p>
  <div id="nav-button">

    <a href="#topage2" class="smoothScroll"><center>Scroll Down</center></a></div>

</div> <!-- End of first page -->



<div id="second-page">
  <a name="topage2" />

  <p class="Quote">I've got a degree in marketing and an aptitude for design.</p>
  <p class="P1">Test text 2.</p>

  <div id="nav-button2">
    <a href="#topage3" class="smoothScroll"><center>Scroll Down</center></a></div>

</div> <!--End of second page-->



<div id="third-page">

  <a name="topage3" />

  <div id="nav-button3">

    <a href="#totop" class="smoothScroll"><center>Go to Top</center></a>

  </div>

</div><!--End of third page-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="file:///C:/users/Jack/desktop/projects/smoothscroll.js"></script>
</body>
</html>

CSS

html {background-color: #ffffff; background-size: cover; size: 100%; overflow-x: hidden;}
body {font-family: 'Alegreya Sans', sans-serif;}
.smoothScroll {font-size: 18px; text-decoration: bold; color: #000000; position: absolute; top: 15%; left: 8%;}



#first-page {background-color: #ffffff;  position: relative; background-size: cover; padding-bottom: 48%;}

.header {font-size: 65px; position: absolute; top: 36%; left: 36%; color: #000000; }

.subheader {font-size: 40px; position: absolute; top: 46%; left: 35.5%; color: #a5a5a5;}

#nav-button{display:block; border-radius: 25px; width: 95px; height: 30px; background-color: #a5a5a5; position: absolute; top: 96%; left: 48%; opacity:.5;} #nav-button:hover{background-color: #a5a5a5; opacity:1.0;  -moz-transition: opacity 500ms linear; }

a:link {text-decoration:none;}



#second-page {background-repeat: no-repeat; background-color: #4761fe; position:relative; top: 4%; background-size: 100%; padding-bottom: 39.5%; margin-left: -2%; margin-right: -2%;}

.Quote {font-size: 60px; color: #ffffff; position: relative; bottom: 3%; left: 2%;}

.P1 {font-size: 23px; color: #ffffff; position: relative; top: 50%; left: 50%;}

#nav-button2{display:block; border-radius: 25px; width: 95px; height: 30px; background-color: #ffffff; position: absolute;  top: 92%; left: 48%; opacity:.5;} #nav-button2:hover{background-color: #ffffff; opacity:1.0;  -moz-transition: opacity 500ms linear; }





#third-page {background-color: #ffffff; position:relative; backgroud-size: cover; padding-bottom: 44%;}

#nav-button3{display:block; border-radius: 25px; width: 95px; height: 30px; background-color: #a5a5a5; position: absolute; top: 305%; left: 50%; opacity:.5;} #nav-button3:hover{background-color: #a5a5a5; opacity:1.0;  -moz-transition: opacity 500ms linear; }

Answer 1

“但是我遇到了一些问题，我的页面宽度适合屏幕”

如果我理解这个问题 - 你想要你的div内容完全填满身体吗？如果是这样，你试过了吗？

body {margin:0;padding:0}

编辑：要使第一页覆盖整个窗口，请在CSS中尝试以下操作：

html {height:100%; width:100%}
body {height:100%;}

然后在#first-page div中删除“padding-bottom：48％”，并添加“min-height：100％”。请参阅此处的示例：JSFiddle

我相信这就是你要找的东西，至少在你的第一页上。

Answer 2

尝试将宽度：100％添加到正文。应该这样做。页面高度应为min-height属性，设置为您想要的任何值。

<div id="box">

#box { min-height:70px; background-color:red;}

Fiddle

单页设计有问题

2 个答案: