Подход с нижней подушкой Не работает для равных высот Div

Я хочу сделать два divs равными высотами - левый и правый divs.Подход с нижней подушкой Не работает для равных высот Div

Я сослался на следующие сообщения и нашел нижний подкладочный подход.

Я пытался применить эту концепцию в моей странице; но это работает неправильно. В верхней части правого div есть нежелательное пространство. Как мы можем это исправить?

enter image description here

КОД

<!DOCTYPE html> 

<style type="text/css"> 
    .myContent { 
     width: 100%; 
     border: 2px solid violet; 
     min-width: 1210px; 
    } 

    .myHeader { 
     width: 100%; 
     /*width: 1200px;*/ 
     clear: both; 
     background-color: #DFE8EF; 
     border: 1px solid red; 
    } 

    .leftPart { 
     border: 1px solid red; 
     width: 200px; 
     height: 200px; 
     float: left; 
     background-color: silver; 
    } 

    .rightPart { 
     border: 1px solid orange; 
     background-color: beige; 
     float: left; 
     min-width: 1000px; 
     /* 
     margin-bottom: -1000px; 
     padding-bottom: 1000px; 
     margin-right: -5000px; 
     padding-right: 5000px; 
    */ 
    } 
</style> 

<html> 
<head> 
    <title>UpdateAccrualByItem</title> 


    <link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 

    <div id="body"> 
     <div class="myContent"> 

      <div class="myHeader"> 
       <img src="/Images/logo_header.jpg" /> 
      </div> 

      <div class="leftPart"> 
       Menu 
      </div> 
      <div class="rightPart"> 

       <h2>UpdateAccrualByItem</h2> 
      </div> 

     </div> 
    </div> 

</body> 
</html>

источник

2013-08-21 Lijo

Вы очень близки, но просто есть несколько маленьких вещей неправильно.

Вам не нужна ширина для правой колонки, только по умолчанию width:auto. Я использовал тот же отрицательный запас и трюк, чтобы сделать высоту правого столбца размером с высоту левого, а также дать правой колонке иллюзию захвата остальной части пространства. Вы также должны плавать в правом контейнере и отбирать запас. Вы можете удалить clear:both в левой колонке, потому что он не используется

Demo here

.leftPart { 
    border: 1px solid blue; 
    width: 200px; 
    height:200px; 
    float:left; 
    background-color: orange; 
} 
.rightPart { 
    border: 1px solid orange; 
    background-color: beige; 
    float:left; 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; 
    margin-right: -5000px; 
    padding-right: 5000px; 
}

Редактировать

Вы можете также добавить некоторый тип @media запроса, чтобы регулировать окно, чтобы выглядеть более гладкой , Here is an example. Он полужесткий, закодированный на основе длины текста в примере, но в конечном продукте это может быть что-то, что вы добавляете в конце

источник

2013-08-21 18:40:30

Извините за отмену ответа. Я обновил вопрос. Он не работает с этим макетом. Мне нужно иметь минимальную ширину. Любая резолюция с этим? – Lijo

Итак, когда окно меньше 1200 пикселей, минимальная ширина правого элемента плюс ширина левого элемента, вы хотите, чтобы полоса прокрутки поднималась? Вы хотите, чтобы содержимое за окном скрывалось? Какое поведение вы хотите? –

Когда ширина окна меньше 1200 пикселей, переустановка элементов должна быть «скрыта». – Lijo

Подход с нижней подушкой Не работает для равных высот Div

ответ

Смежные вопросы