Как сохранить пропорции обертки div?

У меня проблема с моими движениями, когда страница изменяется. Если вы посмотрите на плункер, вы увидите заголовок с коробками ниже. Если вы измените размер рабочей области, перетащив полосу прокрутки влево, вы увидите, как должна выглядеть страница. Я попробовал обернуть все элементы в 1 div-оболочке и попытался как относительное, так и абсолютное позиционирование с минимальной шириной. Я также сделал то же самое для тела. После проверки страницы с помощью firebug выглядит так, что тег html должен иметь размер или позиционирование. Это тоже не сработало (см. Ниже). Я хотел бы иметь возможность минимизировать мой экран до 50% и максимизировать до 250% и сохранять тот же исходный макет, как если бы мой экран находился на 95% на основе обертки. Есть идеи?Как сохранить пропорции обертки div?

Вот plnkr

<html> 
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative} 

div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; } 

<body> 
<div class="wrapper" > 
    <div id="header"> 
    <img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1> 
    </div> 

<div class="left"></div> 
     <div class="right"></div> 

</div> <!--end wrapper --> 
</body> 
</html>

источник

2015-07-27 Sunny

Почему вы используете минимальную ширину? – Medda86

использовать жидкость ('' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ' – dippas

вы могли бы использовать процент и исправить мин-wheight + набор переполнение авто (выглядит как фрейме .. не так хорошо на самом деле)

Или вы могли бы попытаться передать на box-sizing и использовать вертикальную padding на процентное значение (это будет использовать родительский width в качестве ссылки).

floatting pseudo можно использовать и позволит divs расти выше, вместо этого показывает полосу прокрутки.

. { 
 
    box-sizing:border-box; 
 
} 
 
.wrapper { 
 
    max-width:1300px; 
 
    margin:auto; /* ?*/ 
 
} 
 
.wrapper #header ~ div { 
 
    border:double; 
 
    margin:0.4% 0.2%; 
 
    padding:5px; 
 
} 
 
#header, .right, .rightbottom { 
 
    overflow:hidden; 
 
} 
 
.left { 
 
    float:left; 
 
    width:30%; 
 
} 
 
.left:before { 
 
    content:''; 
 
    float:left; 
 
    padding-top:204.5%; 
 
} 
 
.right:before, .rightbottom:before { 
 
    content:''; 
 
    padding-top:30%; 
 
    float:left; 
 
} 
 
.wrapper #header ~ div.rightbottom { 
 
    border:solid 1px; 
 
} 
 
.rightbottom:before { 
 
    padding-top:60%; 
 
}


 
<div class="wrapper" > 
 

 
<div id="header"> 
 
    \t <img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1> 
 
</div> 
 
    \t \t 
 
    \t \t <div class="left"> 
 
    \t \t 
 
    \t \t \t </div> 
 
    
 

 
     \t <div class="right" > 
 
     \t \t \t 
 
     
 
     \t \t \t <div class="gridStyle" data-ng-grid="gridOptions1">grid</div> 
 
     
 
     \t \t \t 
 
     \t </div> 
 
     
 
     <div class="rightbottom">right bottom</div> 
 
        
 
     
 
</div>

http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview

Я не слишком уверен, что такое поведение вы смотрите на этот раз есть реальные вещи на ваших страницах.

источник

2015-07-27 18:59:42

Спасибо GCyrillus. Именно то, что я искал. – Sunny

Если вы хотите заголовок и две дивы, чтобы всегда иметь свой собственный ряд, возможно, вы могли содержать их каждый в дивы, которые установлены в width: 100%?

источник

2015-07-27 18:31:19

Как сохранить пропорции обертки div?

ответ

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