余白トップの原因ページを追加する

「mainbar」divの高さを垂直スクロールバーを必要とせずにページ全体を伸ばそうとしていますが、divの上部が見えるようにしています。私は "メインバー"のCSSから "マージントップ"の値を削除すると、それはスクロールバーを削除しますが、トップ50pxをカットオフ。ページを拡張してスクロールバーを追加することなくdivを50px下に移動すると（その中のすべてのコンテンツを見ることができます）ここで余白トップの原因ページを追加する

はhtmlです：ここでは

<!DOCTYPE html> 
    <html> 
    <head> 
     <link href="style.css" type="text/css" rel="stylesheet"> 
    </head> 

    <body> 
     <div class="navbar"> 
     <ul> 
      <li class="nav">Home</li> 
      <li class="nav">About</li> 
      <li class="nav">Upload</li> 
     </ul> 
     </div> 
     <div class="mainbar"> 
      <h1>hello</h1> 
      <h2>whats up</h2> 
     </div> 
    </body> 
    </html>

だから問題は、それはそう、あなたがナビゲーションバーのために一定の高さを有し、かつ取るmainbarたいということであるCSS

* { 
    box-sizing: border-box; 
} 

body { 
    background-color: #450068; 
    background-color: rgb(69, 0, 104); 
    margin: 0px; 
    padding: 0px; 
} 
h1, h2 { 
    text-align: center; 
    color: white; 
} 

li { 
    display: inline; 
    text-align: right; 
    list-style: none; 
    padding: 20px; 
} 

.navbar { 
    background-color: #8729a5; 
    border-bottom: .5px solid gray; 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    top: 0; 
    padding: 0px; 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
} 

.mainbar { 
    background-color: #8729a5; 
    background-color: black; 
    height: 100vh; 
    width: 1100px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px; 
    border: .5px solid gray; 
    border-radius: 15px; 
    overflow: scroll; 
    overflow-x: hidden; 
}

出典

2016-10-22 caleho6

です残りの画面。

メインバーの高さが100vhの場合、ビューポートの高さになります。だから何かあなたは50pxを下に移動するとスクロールバーが表示されます。これは、ピクセルサイズと相対（％、vh/vw）サイズの混合の頭痛です。

ターゲットブラウザが最新のCSSをサポートしている場合は、フレックスボックスがこの問題の解決策です。

もしそうでない場合は、最初のCSSベースのレイアウトが計算された後にJavaScriptを使用してメインバーのdivのサイズを調整することです。フレックスボックスの前には純粋なCSSソリューションは存在しませんでした。

出典

2016-10-22 01:47:42

ありがとうございました。私は.navbarの高さを5vm、.mainbarから95vhに変更し、再配置して問題を解決しました。 – caleho6

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: #450068; 
 
    background-color: rgb(69, 0, 104); 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
h1, h2 { 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
li { 
 
    display: inline; 
 
    text-align: right; 
 
    list-style: none; 
 
    padding: 20px; 
 
} 
 

 
.navbar { 
 
    background-color: #8729a5; 
 
    border-bottom: .5px solid gray; 
 
    width: 100%; 
 
    height: 45px; 
 
    position: fixed; 
 
    top: 0; 
 
    padding: 0px; 
 
    border-bottom-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
} 
 

 

 

 
body > .mainbar { 
 
    background-color: #8729a5; 
 
    background-color: black; 
 
    height: 90vh; 
 
    width: 1100px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 50px; 
 
    border: .5px solid gray; 
 
    border-radius: 15px; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
    overflow-y: auto 
 
} 
 

 
new slimScroll(Element);

<!DOCTYPEhtml> 
 
<head> 
 
    <link href="style.css" type="text/css" rel="stylesheet"> 
 
    <script src="slimscroll.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="navbar"> 
 
    <ul> 
 
     <li class="nav">Home</li> 
 
     <li class="nav">About</li> 
 
     <li class="nav">Upload</li> 
 
    </ul> 
 
    </div> 
 
    <div class="mainbar"> 
 
     <h1>hello</h1> 
 
     <h2>whats up</h2> 
 
\t <h2>whats up</h2> 
 
\t 
 
\t \t \t \t \t \t \t \t  
 
    </div> 
 
</body>

を見て：https://github.com/kamlekar/slim-scroll とHide scroll bar, but still being able to scroll

ないことは、あなたが望んでいるかどうかわからなく、プラグインは、ページの右側のスクロールバーを削除>>

出典

2016-10-22 01:54:31

おそらく問題を解決するあなたのCSSを修正してみてください。

margin-topからpadding-topの場合。

* { 
    box-sizing: border-box; 
} 

body { 
    background-color: #450068; 
    background-color: rgb(69, 0, 104); 
    margin: 0px; 
    padding: 0px; 
} 
h1, h2 { 
    text-align: center; 
    color: white; 
} 

li { 
    display: inline; 
    text-align: right; 
    list-style: none; 
    padding: 20px; 
} 

.navbar { 
    background-color: #8729a5; 
    border-bottom: .5px solid gray; 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    top: 0; 
    padding: 0px; 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
} 

.mainbar { 
    background-color: #8729a5; 
    background-color: black; 
    height: 100vh; 
    width: 1100px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 50px; /* here */ 
    border: .5px solid gray; 
    border-radius: 15px; 
    overflow: scroll; 
    overflow-x: hidden; 
}

出典

2016-10-22 02:06:51 Abk

余白トップの原因ページを追加する

答えて

関連する問題