Как сделать этот отзывчивый макет с помощью CSS?

Question

Извините, я полный noob с css и веб-материалами.

Я хочу создать адаптивный макет сетки, чтобы сохранить эти отношения:

• B.width/C.WIDTH = 5/7
• A.width = B.width
• C.height = 100% высоты экрана
• A.width = B.width

Вот иллюстрация, где а, В, и С должны все быть div элементы.

|--5--|---7---| 
|  |  | 
| B 5 C | 
|  |  | 
|-----|  | 
| A 1  | 
|-----|-------| 

То, что я пытался не работает по нескольким причинам:

• Когда окно мала, столбцы складывают друг на друга рядами
• «А» ДИВ является значительно ниже «B» div из-за того, как далеко расширяется «C»
• Высота C не равна 100% высоты окна.

Вот код для этого

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="row-fluid"> 
 
    <div class="span5"> 
 
     <div class="well"> 
 
      B 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
     </div> 
 
    </div> 
 
    <div class="span7"> 
 
     <div class="well"> 
 
      C 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="row-fluid"> 
 
    <div class="span5"> 
 
     <div class="well"> 
 
      A 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Вы можете просто использовать проценты, если вы хотите коробки, чтобы вести себя так же, независимо от размера экрана. Разумеется, что для небольших экранов лучше отображать блоки под друг другом, а также мощность сетки, введенную Bootstrap.

Во всяком случае для простого и чистого CSS решения фиксированной проценты:

html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; /* This is to make the height percentages work */ 
 
} 
 

 
.A, .B, .C { /* This is just to show the boxes */ 
 
    box-sizing: border-box; 
 
    border: 3px solid silver; 
 
    border-bottom-color: black; 
 
    border-right-color: black; 
 
} 
 

 
.C { 
 
    width: 58.33%; /* 7/12, rounded down */ 
 
    height: 100%; /* Relative to parent. Have a look at `vh` instead of % for viewport height */ 
 
    float: right; /* Float to the right, so A and B will move left of C*/ 
 
} 
 
.B, 
 
.A { 
 
    width: 41.66%; /* 5/12, rounded down */ 
 
} 
 
.B { 
 
    height: 83.33%; /* 5/6, Relative to parent (= body) */ 
 
} 
 
.A { 
 
    height: 16.66%; /* 1/6 */ 
 
}

<div class="C">C</div> 
 
<div class="B">B</div> 
 
<div class="A">A</div>

Answer 2

Вы используете старую версию Bootstrap. Я верю, что у вас есть свои причины. Но всегда лучше использовать последние.

Это возможно. Подумайте о двух столбцах как двух столбцах, а две левые части - в одном столбце.

Поэтому:

<div class="row"> 
    <div class="span6"> 
     <!-- this is where you keep the left two divs, forget about their width, they will occupy the whole space --> 
     <div id="left-1"></div> 
     <div id="left-2"></div> 
    </div> 
    <div class="span6"> 
     <div id="right"></div> 
    </div> 
</div>