Границы смещаются при изменении размера - PullRequest
Новая
       12

Границы смещаются при изменении размера

0 голосов
/ 23 февраля 2012

У меня есть некоторые проблемы с CSS, контент торчит из границ.Ожидается, что у него будет полоса прокрутки, а не скрытое переполнение, а границы.Пожалуйста, помогите.

Вот код, который отражает мою структуру CSS: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>

body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}

div.header{
    background-color:yellow;
    background-position:top;
    padding: 3px;
    }
div.wrapper{
    float:left;
    }
div.context_wrapper{
    margin-left:158px;
    padding: 3px;   
    }
div.context{
    float:left;
    }
div.menu{
    text-align:center;
    padding: 3px;
    width:140px;
    float:left;     
    }
div.footer{
    background-color:yellow;
    background-position:bottom;
    width:auto;
    padding: 3px;
    clear:both;     
    }
</style>
</head>

<body>
<div class="header">Head</div>
<div class="wrapper">
    <div class="menu">Menu</div>
    <div class="context_wrapper">
        <div class="context">
            ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
        </div>
    </div>
</div>
<div class="footer">Foot</div>
</body>

</html>

занятый кот http://img215.imageshack.us/img215/6065/20120223132157.png

1 Ответ

0 голосов
/ 23 февраля 2012

Мне не следует стилизовать элемент body, как если бы это был элемент <div>, лучше сделать новую обертку. Кроме того, из вашего вопроса я понимаю, что вы ищете что-то вроде этого: http://jsfiddle.net/SQDXt/

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

...