CSSレイアウト

私は次のコードを持っている：私は、ウィンドウのサイズを変更すると、コンテンツが国境の外にCSSレイアウト

body { 
 
\t /* Background */ 
 
\t width: 900px; 
 
\t height: 900px; 
 
\t border: 1px solid black; 
 
\t 
 
\t /* Font */ 
 
\t font-family: "arial"; 
 
\t font-size: 12px; 
 
\t color: #000000; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link rel = "stylesheet" type = "text/css" href = "stylesheet.css"> 
 
\t \t <meta name = "author" content = "Afik Atashga" /> 
 
\t \t <meta name = "description" content = "Website" /> 
 
\t \t <meta name = "keywords" content = "Website, Afik Atashga" /> 
 
\t \t <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" /> 
 
\t \t <title>Website.</title> 
 
\t </head> 
 
\t <body> 
 
\t \t Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 
\t \t Text Text Text Text Text Text Text Text 
 
\t </body> 
 
</html> 
 

 

 
/* HTML Tags */ 
 
html { 
 
\t direction: ltr; 
 
\t background-color: #ededed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

です。国境を越えないように、相対的な変更をどのように保つことができますか？

出典

2017-03-11 Afik Atashga

セット高さ：自動。 –

@IvinRaj –

あなただけmax-width: 900px;との組み合わせでwidth: 100%を使用することができます。このように、bodyは900pxより大きくなることはありませんが、900pxより小さいビューポートサイズに適応します。

また、box-sizing: border-box;を使用してください。これは、指定された幅に境界幅を含みます。そうすれば、あなたの要素は指定されたものより大きくなることはありません。私はread about the CSS box modelにお勧めします。

body { 
 
    /* Background */ 
 
    width: 100%; /* <-- adapt to viewport width */ 
 
    max-width: 900px; /* <-- width not larger than 900px */ 
 
    height: 900px; 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    box-sizing: border-box; /* <-- include border into width declaration */ 
 
    margin: 0 auto; /* <-- center body */ 
 
    /* Font */ 
 
    font-family: "arial"; 
 
    font-size: 12px; 
 
    color: #000000; 
 
}

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

詳細についてはMDN about max-widthを参照してください。

出典

2017-03-11 11:25:32 andreas

ありがとうございます。しかし、10％（110％）増加した場合、境界線は残っています@andreas –

どうしてそうするか？国境を110％にしておけば、まったく正しい振る舞いです... – andreas

しかし、私がどんなに増えても、他のサイトでは、テキストは枠内にあり、それを残すことはありません。どのパーセントの国境にもそれを保持する方法はありませんか？ @andreas –

はこのCSSを試してみてください：

  body { 
      /* Background */ 
      max-width: 900px; 
      width: 100%; 
      height: 900px; 
      border: 1px solid black; 
      /* Font */ 
      font-family: "arial"; 
      font-size: 12px; 
      color: #000000; 
     }

出典

2017-03-11 11:24:15

最初に感謝、私はそれを行ったが、それでも動作しません。それは相対的な場合に限り、サイズ変更の増減が25％の場合、たとえば境界の外にある場合は10％です。 –

body { 
 
\t /* Background */ 
 
\t width: 100%; 
 
\t height: 900px; 
 
    max-width:900px; 
 
\t border: 1px solid black; 
 
\t 
 
\t /* Font */ 
 
\t font-family: "arial"; 
 
\t font-size: 12px; 
 
\t color: #000000; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link rel = "stylesheet" type = "text/css" href = "stylesheet.css"> 
 
\t \t <meta name = "author" content = "Afik Atashga" /> 
 
\t \t <meta name = "description" content = "Website" /> 
 
\t \t <meta name = "keywords" content = "Website, Afik Atashga" /> 
 
\t \t <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" /> 
 
\t \t <title>Website.</title> 
 
\t </head> 
 
\t <body> 
 
\t \t Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 
\t \t Text Text Text Text Text Text Text Text 
 
\t </body> 
 
</html> 
 

 

 
/* HTML Tags */ 
 
html { 
 
\t direction: ltr; 
 
\t background-color: #ededed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

出典

2017-03-11 11:27:00

Typo： 'width：100％px;' – andreas

申し訳ありません幅：100％; @ andreas –

答えて

関連する問題