使用Flex盒子或引導程序固定和滾動的列

我在嘗試構建響應式頁面時出現問題。左欄我想成爲一張圖片，其中66％的頁面將被修復，然後右側的內容將佔用餘下的33％，我希望根據內容的數量進行滾動。因此，我選擇使用col-sm-8和col-sm-4。使用Flex盒子或引導程序固定和滾動的列

我一直在嘗試許多不同的變化，以使其工作。我得到的最遠的地方是右邊的內容太大，導致它向下滾動，然後低於圖像空白區域。

這是我到目前爲止有：

<div class="container-fluid" style="padding: 0; margin-right: auto; margin-left: 0px;"> 
    <div class="row" style="margin-bottom: 20px; margin-left: 0px; margin-right: auto;"> 
     <div class="col-lg-8"> 
      <div class="img-holder">         
        <div class="box-wrapper"></div> 
      </div> 
     </div> 
     <div class="col-lg-4"> 
      <h1>Some Content</h1> 
     </div> 
    </div> 
</div>

CSS：

.img-holder { 
    padding: 0; 
    border: none; 
    border-radius: 0; 
    width: 100%; 
    height: 100%; 
    z-index:-1; 
} 

.box-wrapper{ 
background-image: url(~/img/example.jpg); 
    background-size: cover; 
    background-position: 47.5% 42.675%; 
    background-repeat: no-repeat; 
    padding-bottom: 100%; 
}

我想要的頁面是流體，從而縮小頁面的大小時，內容雲照片下方如果在移動或一個平板電腦

來源

2017-06-23 Draklin

這個想法是讓所有的div取100%的頁面高度，並且在將overflow:auto添加到列中時你將擁有你所需要的

見代碼片段：

.img-holder { 
 
    padding: 0; 
 
    border: none; 
 
    border-radius: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
} 
 

 
.box-wrapper { 
 
    background-image: url(https://www.w3schools.com/css/img_fjords.jpg); 
 
    background-size: cover; 
 
    background-position: 47.5% 42.675%; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.wrapper { 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 

 
.wrapper div { 
 
    height: 100%; 
 
    margin: 0; 
 
    max-height: 100%; 
 
    overflow:auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container-fluid wrapper" style="padding: 0; margin-right: auto; margin-left: 0px;"> 
 
    <div class="row"> 
 
    <div class="col-lg-8"> 
 
     <div class="img-holder"> 
 
     <div class="box-wrapper"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <h1>Some Content</h1> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet, 
 
     consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet, 
 
     consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet, 
 
     consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet, 
 
     consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet, 
 
     consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-23 18:12:52 Chiller

謝謝你，讓我給這個一杆。 – Draklin

完美工作！謝謝 – Draklin

不客氣！很高興幫助:) – Chiller

使用Flex盒子或引導程序固定和滾動的列

回答

相關問題