text-align：centerを使用すると、ウェブサイトの幅が突然オーバーフローします。 display：インラインブロック。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>MY NAME</title> 
     <style> 
     /*CSS RESET*/ 
     html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
/*CSS RESET*/ 
body 
{ 
    background-color: white; 
    width: 100vw; 
    max-width: 100vw; 
} 


header 
{ 
    width: 100vw; 
    max-width: 100vw; 

    height: 15vh; 

    max-height: 8vw; 
    background-color: white; 
} 

h1 
{ 
    font-size: 5vw; 
    max-height: 5vw; 
    line-height: 1; 
    color: #333333; 
} 

h2 
{ 
    font-size: 2vw; 
    max-height: 2vw; 
    line-height: 0.1; 
    color: #333333; 
} 

#upperContainer 
{ 
    width: 100vw; 
    max-width: 100vw; 
    max-height: 60vh; 
    background-color: purple; 
    text-align: center; 


} 

#leftBlock 
{ 
    width: 50vw; 
    height: 60vh; 
    max-width: 100vw; 
    max-height: 60vh; 
    height: 60vh; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: pink; 

} 

#rightBlock 
{ 
    width: 50vw; 
    max-height: 60vh; 
    background-color: yellow; 
    display: inline-block; 
    vertical-align: middle; 
} 

#lowerContainer 
{ 
    width: 100vw; 
    max-width: 100vw; 
    max-height: 60vh; 
    background-color: purple; 
    text-align: center; 
} 

#leftBlock2 
{ 
    width: 50vw; 
    height: 60vh; 
    max-width: 100vw; 
    max-height: 60vh; 
    height: 60vh; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: green; 

} 

#rightBlock2 
{ 
    width: 50vw; 
    height: 60vh; 
    max-height: 60vh; 
    background-color: yellow; 
    display: inline-block; 
    vertical-align: middle; 
} 

footer 
{ 
    width: 100vw; 
    max-width: 100vw; 
    height: 15vh; 
    max-height: 8vw; 
    background-color: blue; 
} 
     </style> 
    </head> 
    <body> 
      <header> 
       <mark><h1>MY NAME</h1></mark> 
       <h2>DESCRIPTION</h2> 
      </header> 

      <section id="upperContainer"><article id="leftBlock"></article><article id="rightBlock"></article></section> 
      <!--UNCOMMENT TO SEE PROBLEM <section id="lowerContainer"><article id="leftBlock2"></article><article id="rightBlock2"></article></section>--> 

    <footer>FOOTER</footer> 
    </body> 
</html>

私の質問は、htmlのコメントタグを削除すると、突然ページの幅がブラウザのウィンドウより広くなっています。あなたたちはこれをどのように修正するか考えていますか？私は何か奇妙なエラーのように感じる。text-align：centerを使用すると、ウェブサイトの幅が突然オーバーフローします。 display：インラインブロック。

出典

2016-05-16 blabla

はそれのjsfiddle ..ですhttps://jsfiddle.net/4erj4w2p/ – blabla

まず、あなたがあなたの#rightBlockには高さを持っていない。これを追加します。

height: 60vh;

はその後、あなたはあなたの第二のセクション、lowerContainerを追加するとき、あなたは「自動的に」垂直スクロールバーを作成します。スクロールバーのため、コンテンツを表示するための水平方向のスペースが必要です。これは、水平スクロールバーを使用しているためです。

代わりにheight = 10vhを入力すると、問題はありません。

出典

2016-05-16 17:47:45

ありがとうございました！あなたたちはそのようなヒーローです！このようなものは、本当に私を驚かせることができます..再び感謝します。 – blabla

これは100vwのために余分な幅を与えています。 100vwを100％更新しました。正常に動作しています。更新して確認してください。

また、vwについて教えてください。それはpxと関係がありますか？または単にロケールの問題？

出典

2016-05-16 17:50:13 Bkjain655

Uhm ..私はベンとvh（ビューポートの幅とビューポートの高さ）をしばらく使用していましたが、常にレスポンシブルデザインには完璧だと思っていました。 - > http://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw – blabla

ここではJsFiddle https://jsfiddle.net/4erj4w2p/1/が更新されています。問題は、幅単位 - vw（ビューポート幅）です。スクロールバーの幅も考慮します。これを参照してください：Why does vw include the scrollbar as part of the viewport?

にCSSを更新：ここ

/*CSS RESET*/ 
     html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
/*CSS RESET*/ 
body 
{ 
    background-color: white; 
    width: 100%; 
    max-width: 100%; 
} 


header 
{ 
    width: 100%; 
    max-width: 100%; 

    height: 15vh; 

    max-height: 8vw; 
    background-color: white; 
} 

h1 
{ 
    font-size: 5vw; 
    max-height: 5vw; 
    line-height: 1; 
    color: #333333; 
} 

h2 
{ 
    font-size: 2vw; 
    max-height: 2vw; 
    line-height: 0.1; 
    color: #333333; 
} 

#upperContainer 
{ 
    width: 100%; 
    max-width: 100vw; 
    max-height: 60vh; 
    background-color: purple; 
    text-align: center; 


} 

#leftBlock 
{ 
    width: 50%; 
    height: 60vh; 
    max-width: 100vw; 
    max-height: 60vh; 
    height: 60vh; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: pink; 

} 

#rightBlock 
{ 
    width: 50%; 
    max-height: 60vh; 
    background-color: yellow; 
    display: inline-block; 
    vertical-align: middle; 
} 

#lowerContainer 
{ 
    width: 100%; 
    max-width: 100vw; 
    max-height: 60vh; 
    background-color: purple; 
    text-align: center; 
} 

#leftBlock2 
{ 
    width: 50%; 
    height: 60vh; 
    max-width: 100vw; 
    max-height: 60vh; 
    height: 60vh; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: green; 

} 

#rightBlock2 
{ 
    width: 50%; 
    height: 60vh; 
    max-height: 60vh; 
    background-color: yellow; 
    display: inline-block; 
    vertical-align: middle; 
} 

footer 
{ 
    width: 100%; 
    max-width: 100vw; 
    height: 15vh; 
    max-height: 8vw; 
    background-color: blue; 
}

出典

2016-05-16 17:52:41

text-align：centerを使用すると、ウェブサイトの幅が突然オーバーフローします。 display：インラインブロック。

答えて

関連する問題