單頁設計遇到問題

我對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; }

來源

2013-12-15 JackJohnson

一對夫婦的建議。 ''在第二行不能在那裏，應該是''。每個元素都應該在''或''內，並且這些元素應該位於''的內部。我編輯了你的代碼來反映這一點。此外，我建議您嘗試使用[jsfiddle]（http://jsfiddle.com/）在stackoverflow中詢問html/css/javascript，這會讓您的問題更容易回答，從而獲得更多更好的答案。 –

「但我有一些問題讓我的網頁寬度以適應屏幕」

如果我沒有理解問題 - 你想讓你的div內容完全填充正文？如果是這樣，你有沒有嘗試過：

body {margin:0;padding:0}

編輯：要獲得覆蓋整個窗口的第一頁，嘗試在你的CSS如下：

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

然後在＃第一頁的div刪除「填充底部：48％」，並添加「最小高度：100％」。請看這裏的例子：JSFiddle

我相信這就是你要找的東西，至少在你的第一頁上。

來源

2013-12-15 17:21:17 pnellesen

謝謝！這似乎適用於Internet Explorer，但我的內容仍然比Firefox中的屏幕寬，創建了一個水平滾動條。我用overflow-x：hidden;擺脫滾動條，但由於某種原因，空間仍然存在... – JackJohnson

我在IE和FF中看到相同的行爲。道歉，如果我誤解了這個問題。 – pnellesen

嘗試將寬度：100％添加到身體。這應該做到這一點。頁面高度應該是最小高度屬性，設置爲任何你想要的。

<div id="box">

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

Fiddle

來源

2013-12-15 20:33:17 user3026261

單頁設計遇到問題

回答

相關問題