Установка размера div на 100% окна браузера с большим содержанием в нем - PullRequest
Новая
       11

Установка размера div на 100% окна браузера с большим содержанием в нем

0 голосов
/ 09 марта 2011

У меня проблема с установкой высоты div: у меня есть 3 div и один элемент svg друг в друге таким образом: 

<body>
  <div id="1">
    <div id="2">
      <div id="3">
        <svg></svg>
      </div>
    </div>
   </div>
</body>

(есть также другие элементы в div 1 и 2)

Предположим, что svg очень большой (то есть 2048x2048), мне нужно, чтобы размер div3 (а это также означало бы div2 и div1) имел размер 100% окна браузера (за исключением других элементов и полей в верхних слояхdivs) - когда браузер изменяет размер, div также должен.Поскольку scg больше div3, в div3 должны быть полосы прокрутки (полосы прокрутки должны быть в div3, а не во всем окне браузера, чтобы прокручивать только содержимое div3 (элемент svg), а не весь контент браузера!).

Мне уже удалось заставить его работать таким образом по ширине, но не по высоте, когда я установил высоту всех элементов, кроме svg (также для body), на 100%, как я нашел где-то (также пробовал с min-height),тогда все div имеют высоту svg и полосы прокрутки в окне браузера, прокручивая всю страницу.

Ответы [ 2 ]

1 голос
/ 09 марта 2011

Попробуйте добавить: 

overflow:scroll;

На ваш CSS для div3.

JSFiddle

0 голосов
/ 10 марта 2011

Для любого, кто заинтересован в подобном случае, мне удалось это сделать. Я отказался от использования div3 (после всего этого не было необходимости), поэтому макет страницы выглядит следующим образом: 

<div id="1">
 something          
 <div id="2">
  <svg width='2048' height='2048' ></svg>
 </div>
 <div id="footer">something</div>
</div>

и css: 

body, html, {
padding : 0px;
margin : 0px;
width : 100%;
height : 100%;
} 
#nr2{
overflow: scroll;
position: absolute;
top: 10px; /* must be the height of everything above div */
left: 0px;
right: 0px;
bottom: 10px; /* must be the height of footer */
}
#footer{
height: 10px;
position: fixed;
bottom: 0px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...