2016-09-04 11 views
1

私はブートストラップとWeb開発の新人です。私は常に16:9の長さと幅の比を維持する応答性の高いdivを作りたかったのです。この応答部分の上にヘッダーとフッターセクションがあります。しかし、ヘッダーセクションとフッターセクションはお互いに積み上げられています。どんな助けもありがとう。2つの部門が互いに積み重なっています。それを避ける方法は?

HTML

<div class="post-card-outer"> 
       <div class="post-card-inner"> 
        <div class="space-header"> 
        </div> 
        <div class=" post-content"> 
         <div class="col-sm-6 content-leftcol"> 
          <div class="image-sec-post-card"> 
           <img class = "image-post-card" src="3.jpeg"> 
          </div> 
         </div> 
         <div class="col-sm-6 content-rightcol"> 
          right 
         </div> 
        </div> 
        <div class="space-footer"> 
         GGDYGDYGDYGDYGYDGDGYD 
        </div> 
       </div><!--post-card-inner--> 
      </div><!--post-card-outer--> 

CSSまあ

.post-card-outer{ 
    width: 100%; 
    padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/ 
    position: relative; 
    background: coral; 
    margin-top:50px; 
} 
.post-card-inner{ 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
} 
.space-header {margin-top:-10px; height:10px; background-color:red;} 
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;} 
.post-content{ 
    min-height:100%; background-color:green; 
    position:absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
} 
.content-leftcol{ 
    background-color:black; 
    width:50%; 
    height:100%; 
} 
.content-rightcol{ 
    background-color:blue; 
    width:50%; 
} 
.image-sec-post-card{ 
    border:1px solid white; 
    vertical-align: middle; 
    overflow: hidden; 
} 
.image-post-card{ 
    max-width:100%; 
    max-height:100%; 
    border:1px solid green; 
} 

答えて

0

あなた、あなたのヘッダーが一番上にあることを意味するとフッターは、ページ/要素の一番下にあることを意味する場合絶対配置または固定配置を使用できます。

絶対配置を使用すると、要素は自動的にウィンドウ/要素の左上に設定されます。グリッド上の(0,0)の位置付けと考えることができます。要素を絶対に配置するように指示すると、TOP、RIGHT、BOTTOM、LEFTの各プロパティを使用できます。これらのプロパティは、要素の原点に直接影響します。たとえば、Top:0はウィンドウの一番上に要素を置き、Bottom:0はウィンドウの一番下に要素を配置します。要素とウィンドウの側面の間に少しのスペースを入れたい場合は、単純に数を増やすことができます。上:20pxまたは上:2vh

固定された位置付けは、要素が静的になり、上下にスクロールしても移動しないことを除いてほぼ同じです。これは、固定ナビゲーションバーと固定フッターを実現する方法です。

.space-header {margin-top:-10px; height:10px; background-color:red;top:0;position:absolute;} 

.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;bottom:0;position:absolute;} 
0
body{ margin:0; padding:0; color:#fff;} .space-header {height:50px; background-color:red;} .space-footer {height:50px; background-color:red;color:white;} .post-content{min-height:100%; background-color:green;} .content-leftcol{background-color:black;width:50%;height:47vw; float:left;} .content-rightcol{background-color:blue;width:50%;height:47vw; float:left;} .image-sec-post-card{border:1px solid white;vertical-align: middle;overflow: hidden;}.image-post-card{max-width:100%; max-height:100%; border:1px solid green;} .clearfix{clear:both; float:none;} 

<body><div class="space-header">Header 
       </div> 
        <div class="clearfix"></div> 
       <div class=" post-content"> 
        <div class="col-sm-6 content-leftcol"> 
         <div class="image-sec-post-card"> 
          <img class = "image-post-card" src="3.jpeg">Left 
         </div> 
        </div> 
        <div class="col-sm-6 content-rightcol"> 
         right 
        </div> 
         <div class="clearfix"></div> 
       <div class="space-footer"> 
        Footer 
       </div> 
      </div> </body> 
関連する問題