Изменение размера DIV внутри DIV 100% высота с маркой вокруг не работает хорошо! Помогите пожалуйста?

Это общий вопрос, но немного отличающийся от решений, которые я нашел, и я пытался решить его без успеха, поэтому, если кто-то может помочь мне в этом, я был бы признателен.Изменение размера DIV внутри DIV 100% высота с маркой вокруг не работает хорошо! Помогите пожалуйста?

У меня есть div #wrapper, который простирается до 100% ширины и высоты браузера. Пока что так хорошо ... Теперь внутри #wrapper мне нужен div #content, который автоматически растягивается с родительским div, поддерживающим 30px-маржу вокруг него. Мне (почти) удалось это сделать, но я не могу сделать растяжение #content div в своей высоте. Вот пример того, что я пытаюсь сделать:

example

Это код CSS У меня есть:

* { 
    margin: 0; 
    padding: 0; 
    outline: 0; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    cursor: default; 
} 

#wrapper { 
    width: 100%; 
    min-height: 100%; 
    height: auto !important; 
    position: absolute; 
    background: #333; 
    text-align: center; 
} 

#content { 
    /*width: 100%;*/ 
    min-height: 100%; 
    height: auto !important; 
    margin: 30px; 
    overflow: hidden; 
    background: #ccc; 
}

Это HTML:

<body> 

<div id="wrapper"> 

    <div id="content"> 
    This DIV should stretch to 100% height of its parent and body 
    minus the 30px margin around and resize as the window is resized.<br /> 
    It's working in width but not in height!<br /><br /> 
    Whatever goes in here (a child DIV) no matter its size should not be 
    visible beyond this DIV boundaries (as the Overflow is set to "hidden")! 
    </div> 

</div> 

</body>

И это то, что я получаю как в Chrome, так и в IE:

current result in Chrome and IE

Любая помощь по этому вопросу? Является ли это возможным? Мне что-то не хватает?

Спасибо заранее, LM

источник

2013-06-23 El Eme

http://jsfiddle.net/nirus/wbRwS/ Проверьте это .. – Nirus

Ну, извините, я не упомянул, но я также пробовал этот подход до публикации здесь, он не работает, потому что мне нужно, чтобы поля были фиксированным значением (например: 30px), и процент будет испортить его при изменении размера окна! Кроме того, как-то ширина не правильная, она отскакивает больше влево ... Спасибо в любом случае :) –

В вашем .css, заменяющие #content со следующим

#content { 
    overflow: hidden; 
    background: #ccc; 
    position: absolute; 
    top: 30px; 
    left: 30px; 
    right: 30px; 
    bottom: 30px; 
}

источник

2013-06-23 21:06:16

СПАСИБО БОЛЬШЕ :) он работает так, как мне было нужно! Один из этих заблуждений CSS, я начал думать о ширине, высоте и полях, и это даже не пришло мне в голову, что подход. Так просто ... что я чувствую себя глупым! –

#content { 
    min-height:90%; 
    position:absolute; 
    margin: 5%; 
    overflow: hidden; 
    background: #ccc; 
}

источник

2013-06-23 18:43:05

Спасибо, но это не сработает ... точно так же, как я написал в комментарии выше. Мне нужно фиксированное значение, а не процент. Любой другой трюк ?! –

Изменение размера DIV внутри DIV 100% высота с маркой вокруг не работает хорошо! Помогите пожалуйста?

ответ

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