HTML5とCSS3を使用した全角分割（レスポンシブ）
https://stackoverflow.com//questions/25076798
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は StackOverflow に比較的慣れていないため、Web ページの作成中にいくつかの問題を経験しています
したがって、私が必要とするのは、全幅の div (つまり、画面の 100% の幅) であり、異なる背景色で連続したさまざまなセクションに分割された 1 ページの Web サイトです。
私が直面している問題は、divが画面の全幅を占めておらず、側面だけでなく2つのdivの間にも空白があることです。
また、ウィンドウ サイズが小さくなると、div 間のギャップが増加します。
望ましい結果は、次の Web サイトに記載されているとおりです。
http://classrebels.com/
http://startbootstrap.com/templates/freelancer/
私が使用しているコードは次のとおりです。
i) HTML:
<html>
<body>
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
</body>
</html>
ii) CSS:
.full{
width= 100%;
}
#one{
background-color: #fff;
}
#two{
background-color: #f13;
}
どこが間違っているのか教えてください
解決
HTML
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
CSS
body, html {
width: 100%;
height: 100%;
margin:0; /* default margin set to 0 */
padding:0; /* default padding set to 0 */
}
.full {
width: 100%;
}
#one {
background-color: gray;
height: 50%; /* whatever you want to give height */
}
#two {
background-color: #f13;
height: 50%; /* whatever you want to give height */
}
.full h1 {
margin:0; /* default margin of h1 tag set to 0 */
padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
他のヒント
デモフィドル
ビューポート上のデフォルトのマージン/パディング (空白を与えている) を削除するには、次の CSS を追加する必要があります。
html, body{
width:100%; /* <-- also a good idea to add */
margin:0;
padding:0;
}
そして変更します:
.full{
width= 100%;
}
に：
.full{
width:100%;
}
CSS スタイルのプロパティと値のペアはコロンで区切られます。 : そして同等ではない =
マージンとパディング0を完全でボディタグで設定しようとしましたか
のように .full
{
width :100%;
margin:0px;
padding:0px;
}
同様に見出しにも余裕がありますので、必要に応じて見出しのマージンを設定してください。 このリンクをご覧ください
ブラウザにデフォルト値があるため、ボディとH1の余白を変更する必要があります。 私はこのフィドルであなたのためにそれを修正しました：
h1{
margin: 0px;
}
body{
border: 0px;
padding: 0px;
margin: 0px;
}
問題はあなたが全体のDIVを背景色に与えてはいけないということです。
境界線を広告する場合は、DIVの実サイズを見ることができ、DIV全体をカラーで埋めます。
そのために作ったフィドルをチェックする
border: 1px solid black;
ボーダーを0pxに設定することで、表示されていないため、正しい結果を与える
デモはあなたが完全な幅のdivを使用していないことをリンクしていることです。背景色を設定している全幅の<section>要素を実際に使用します。
その後、それらは内列の<div>を持ち、それはコンテナと列の<div>を持ちます。そのため、Freelancerの例ではこのように見えます：
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="#" class="btn btn-lg btn-outline">
<i class="fa fa-download"></i> Download Theme
</a>
</div>
</div>
</div>
</section>
CSSのサンプル：
section.success {
color: #fff;
background: #18bc9c;
}
.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
そのテンプレートをダウンロードし、 bootstrap を使用して、望む外観を得るために遊びます。
