Получить ‹div› для изменения размера, когда пользователи изменяют размер браузера

Я хочу, чтобы ширина и высота div менялись вместе с браузером, поскольку ширина и высота браузера изменяются, когда пользователь меняет размеры своего просмотра.

Код добавлен на основе предложения ответов

<!doctype html>
<html>
    <head>
    <link rel="shortcut icon" href="/favicon.ico"> 
    <meta charset='UTF-8'>
    <%= stylesheet_link_tag 'application' %>
    <title>Some Company - Terms and Conditions</title>
</head>
<body >
<div>
    some anchor links here go to the content inside the div below
    </div>
   <div style="position: absolute; top: 100; bottom: 0; left: 0; right: 0;overflow:auto;padding:10px;border:1px solid lightblue;">
     content here
    </div>
</body>

Here was the end result:

<!DOCTYPE html>
<html>
<head><title>Terms and Conditions</title></head>
<body>
<a href="#tac20">Terms and Conditions 20</a> | <a href="#tac40">Terms and Conditions 40</a>

    <div style="position:absolute; top: 30px; bottom: 0; left: 0; right: 0;overflow-y:auto;padding:5px;border-top:1px solid lightblue;">
        Terms and Condition 1 <br/>     
        Terms and Condition 2 <br/>
        Terms and Condition 3 <br/>
        Terms and Condition 4 <br/>
        Terms and Condition 5 <br/>
        Terms and Condition 6 <br/>
        Terms and Condition 7 <br/>
        Terms and Condition 8 <br/>
        Terms and Condition 9 <br/>
        Terms and Condition 10 <br/>
        Terms and Condition 11 <br/>        
        Terms and Condition 12 <br/>
        Terms and Condition 13 <br/>
        Terms and Condition 14 <br/>
        Terms and Condition 15 <br/>
        Terms and Condition 16 <br/>
        Terms and Condition 17 <br/>
        Terms and Condition 18 <br/>
        Terms and Condition 19 <br/>
        <a name="tac20">Terms and Condition 20</name> <br/>
        Terms and Condition 21 <br/>        
        Terms and Condition 22 <br/>
        Terms and Condition 23 <br/>
        Terms and Condition 24 <br/>
        Terms and Condition 25 <br/>
        Terms and Condition 26 <br/>
        Terms and Condition 27 <br/>
        Terms and Condition 28 <br/>
        Terms and Condition 29 <br/>
        Terms and Condition 30 <br/>
        Terms and Condition 31 <br/>        
        Terms and Condition 32 <br/>
        Terms and Condition 33 <br/>
        Terms and Condition 34 <br/>
        Terms and Condition 35 <br/>
        Terms and Condition 36 <br/>
        Terms and Condition 37 <br/>
        Terms and Condition 38 <br/>
        Terms and Condition 39 <br/>
        <a name="tac40">Terms and Condition 40</name> <br/>
    </div>
</body>


browser scroll html css resize
person thenengah    schedule 13.08.2010    source источник
comment
-1 Потому что 80% вопроса — это не относящиеся к делу детали (иначе бессвязные) и, в конце концов, я до сих пор понятия не имею, о чем вы спрашиваете   -  person Josh Stodola    schedule 13.08.2010
comment
мой плохой, было несколько пива. Я поменяю его за 30 секунд.   -  person thenengah    schedule 13.08.2010
comment
вы не можете просто использовать проценты для атрибутов ширины/высоты CSS, а не пиксели?   -  person RPM1984    schedule 13.08.2010
comment
спасибо за комментарий, высота, установленная в процентах, не даст этого эффекта   -  person thenengah    schedule 13.08.2010

Ответы (1)


arrow_upward
3
arrow_downward

Правильное решение зависит от макета страницы. Если у вас есть только один div, который вы хотите заполнить окно браузера, я считаю этот CSS самым простым решением:

#theDiv { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
person Jacob    schedule 13.08.2010
comment
Вы взяли слова из моего рта. Этот метод также позволяет вам добавить постоянный зазор вокруг div. Размер в процентах будет колебаться в размере зазора вокруг div. - person Bryan Downing; 13.08.2010
comment
Да, это выглядит хорошо и работает! Проверьте мое редактирование, чтобы увидеть, что происходит - person thenengah; 13.08.2010
comment
У меня есть ссылки выше, по которым я всегда хочу быть в топе для навигации - person thenengah; 13.08.2010