的div造成滾動

目前，我試圖模仿這個網站獲得一些實踐 Link 的div造成滾動

但是我有網站的佈局主要問題。似乎我使用的很多position: relative;這是導致我的網站搞砸了導航欄等。我不知道是否有一個更簡單的方法是？正如你可以通過網站所述。標誌和導航欄已左右浮動，但其位於屏幕中間。這是我無法修復的另一個問題。當我將我的東西飄到右邊和左邊時，它一直走到邊界。這就是爲什麼我使用position屬性把它放在中間。

另一個大問題是，該網站應該沒有滾動到右側，但你可以去右邊，並在我的下降。首頁應該全部在屏幕上，不滾動。我再一次相信這是下降到事業部結構

在我已成立的背景圖像的時刻。兩個導航欄。頂部和底部的一個。我已經把兩個日誌，並把導航欄中。但如上所述的問題與divs。

HTML: 
<body> 
<div class="container"></div> 

<ul class="nav"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/about/">About</a></li> 
    <li><a href="/Member/">member</a></li> 
</ul> 

<div class="container1"> 
    <p>a</p> 
     <div class="botLay"> 

     </div> 
</div> 

<div class="logo"> 
<img src="Image/Logo.png"> 
</div> 

<div class="logo1"> 
<img src="Image/Logo.png"> 
</div> 
</body>

Nav div是頂級的黑色酒吧。容器1是底部條。標誌1和2是兩個標誌。

CSS：

html { 
background: url(../Image/BackgroundImage.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

html, body { 
    height: 100%; 
} 


.logo{ 
    position: relative; 
    top: -157px; 
    left: 450px; 
    width: 100px; 
} 
.logo1{ 
    position: relative; 
    top: 521px; 
    left: 450px; 
} 
.container1{ 
    position: relative; 
    top: 446px; 
    right: 40px; 
    background-color: rgba(0, 0, 0, 0.65); 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
    width: 2000px; 
    padding:15px; 

} 
.nav{ 
    position: relative; 
    top: 36px; 
    right: 40px; 
    background-color: rgba(0, 0, 0, 0.65); 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
    list-style:none; 
    text-align:center; 
    width: 2000px; 
} 
.nav li { 
    display: inline-block; 
    position: relative; 
    left: 280px; 
} 
.nav li + li:before { 
    content: ""; 
    display: inline-block; 
    vertical-align: middle; 
    border-left: 1px solid #ffffff; 
    padding-left: 8px; 
    height: 28px; 
} 
.nav a{ 
    display:inline-block; 
    padding:35px; 
    text-decoration: none; 
    color: white; 
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif; 
    text-transform: uppercase; 
} 
ul a:hover { 
color: #ffcb80; 
}

上解決這個代碼，並建議任何幫助將大大學徒。由於

來源

2016-01-21 MadMan

給你一個簡單的解決方案

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
background: url('http://www.motionbackgroundsforfree.com/wp-content/uploads/2012/02/Screen-shot-2012-02-07-at-10.02.45-AM.png') no-repeat center center fixed; 
 
-webkit-background-size: cover; 
 
-moz-background-size: cover; 
 
-o-background-size: cover; 
 
background-size: cover; 
 
} 
 

 
header > .logo{ 
 
    float: left; 
 
    margin-left: 20& 
 
    } 
 
    
 

 
header nav { 
 
    float: right; 
 
} 
 

 
header { 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
.nav { 
 
    margin-right: 20%; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    position: relative; 
 
    
 
} 
 
.nav li + li:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border-left: 1px solid #ffffff; 
 
    padding-left: 8px; 
 
    height: 28px; 
 
} 
 
.nav a{ 
 
    display:inline-block; 
 
    padding:28px; 
 
    text-decoration: none; 
 
    color: white; 
 
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif; 
 
    text-transform: uppercase; 
 
} 
 
ul a:hover { 
 
color: #ffcb80; 
 
} 
 

 

 
footer > .logo{ 
 
    float: left; 
 
    margin-left: 200px 
 
} 
 
    
 

 

 
footer { 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
 
    width: 100%; 
 
    height: 100px; 
 
position: absolute 
 
    bottom: 0 
 
}

<header> 
 
    <div class="logo"> 
 
    <img src="http://placehold.it/140x100"> 
 
    </div> 
 
    <nav> 
 
    <ul class="nav"> 
 
    <li><a href="/">Home</a></li> 
 
    <li><a href="/about/">About</a></li> 
 
    <li><a href="/Member/">member</a></li> 
 
</ul> 
 
    </nav> 
 

 
</header> 
 

 
<section> 
 

 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</section> 
 

 
<footer> 
 
    <div class="logo"> 
 
    <img src="http://placehold.it/140x100"> 
 
    </div> 
 

 

 
</footer>

考慮添加響應導航菜單http://codepen.io/marti1125/pen/YwYOxw

來源

2016-01-21 16:57:52 Osgux

非常感謝。這是完美的:) – MadMan

但是還有1個問題抱歉！如果我想將頁腳移動到頁面末尾，我該怎麼做？ – MadMan

嘗試在腳下加{位置：絕對底部：0} – Osgux

進行這些更改

.logo{  
    left: 150px; 
    } 

    body {  
    overflow-y:hidden; /* For right scrollbar*/ 
    /* overflow-x:hidden for horizontal scrollbar */ 
    } 

    .nav li { 
    left: 1580px; 
    }

我會建議你做一些試驗和變化，按您的要求，因爲位置是相對的。我還建議你使用Mozilla firebug，這樣可以讓你更容易理解。如果你得到你想要的東西，請告訴我。

來源

2016-01-21 16:50:16 HebleV

可惜不是:(它實際上是走了，更糟的是，我認爲主要的問題是我的事業部佈局/你會知道如何以正確的方式創建div？ – MadMan

你可以給我一個小提琴，因爲我看到在這裏工作，我不認爲任何問題與div適當關閉 – HebleV

接受的答案是否顯示右側滾動條？ – HebleV

的div造成滾動

回答

相關問題