Bootstrap 3並排兩個50％寬度的div

我一直在試圖完成這個過去兩天。有人幫忙。我試圖把這個頁面分成兩半。左側100％的高度和右側只是滾動更多的內容。爲什麼右側在右側崩潰？如何解決Bootstrap 3中的這個謎題？這裏是我的代碼：Bootstrap 3並排兩個50％寬度的div

<section id="main-body" class="container-fixed main-body"> 
     <div class="row text-center"> 
      <div class="col-md-6 left-side-home-outer"> 
       Left Side Content 
      </div> 

      <div class="col-md-6 right-side-home"> 
       Right Side Content 
      </div> 
     </div> 
</section> 

.left-side-home-outer { 
border: 1px solid blue; 
height: 100%; 
position: fixed; 
font-family: "Roboto"; 
font-weight: 800; 
} 

.right-side-home-outer { 

border: 1px solid blue; 
height: 100%; 
width: 50%; 
overflow: auto; 
font-family: "Roboto"; 
font-weight: 800; 
}

如果可能的話，如果我想添加一個固定在左側底部的頁腳，那麼CSS會是什麼？非常感謝。

來源

2016-03-17 RP McMurphy

爲什麼寬度50％在右側家庭外？ – scaisEdge

爲什麼固定在左側家庭外，也是你的html類是「右側家」..你的CSS顯示「。右側家庭外」 –

@Maulzal我實際上正在研究更多複雜的頁面，只是剝離內部的div，這就是爲什麼類名不加起來。對於那個很抱歉。 –

沒有必要爲position: fixed ..這是什麼導致內容重疊。

另外width:50%也是多餘的..因爲它已經是一個col-md-6 ..一個50％寬的列。

<section id="main-body" class="container-fixed main-body"> 
     <div class="row text-center"> 
      <div class="col-md-6 left-side-home-outer"> 
       Left Side Content 
      </div> 

      <div class="col-md-6 right-side-home"> 
       Right Side Content 
      </div> 
     </div> 
</section> 

.left-side-home-outer { 
border: 1px solid blue; 
height: 100%; 
font-family: "Roboto"; 
font-weight: 800; 
} 

.right-side-home-outer { 

border: 1px solid blue; 
height: 100%; 
overflow: auto; 
font-family: "Roboto"; 
font-weight: 800; 
}

來源

2016-03-17 20:18:49

非常感謝回覆，但它是我的瀏覽器嗎？ divs並沒有完全達到100％的高度。它正在崩潰到內容高度。這是我實際上堅持的全部問題。我向前邁進，並用@Mary Kelly的解決方案之一製作了一支筆。這是它： http://codepen.io/rpmcmurphy/pen/ZWLoBP –

不，它不是你的瀏覽器......它是如何被假設...我會更新答案，如果你想'身高：100％'... –

檢查此.. http://codepen.io/anon/pen/xVgjPw –

你不需要有固定的定位，實際上你不應該。另外，你不需要在你的課堂上有50％的寬度。在這裏，試試....我無法讓它在小提琴中響應，但它在我跑過的本地文件中工作（是下面複製的內容）。

<style> 
.left-side-home-outer { 
border: 1px solid blue; 
height: 100%; 
font-family: "Roboto"; 
font-weight: 800; 
} 

.right-side-home-outer { 

border: 1px solid blue; 
height: 100%; 
overflow: auto; 
font-family: "Roboto"; 
font-weight: 800; 
} 

</style> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 


<section id="main-body" class="container-fixed main-body"> 
     <div class="row text-center"> 
      <div class="col-md-6 left-side-home-outer"> 
       Left Side Content 
      </div> 

      <div class="col-md-6 right-side-home-outer"> 
       Right Side Content 
      </div> 
     </div> 
</section> 


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

來源

2016-03-17 20:18:50

Bootstrap 3並排兩個50％寬度的div

回答

相關問題