CSS заполнить фоновое изображение по вертикали до 100%

У меня есть веб-сайт с двумя полями в виде изображений. Я использую их в качестве фона для моих дивов.

Когда страница загружена, если родительский размер больше размера окна, появится полоса прокрутки. Бары имеют высоту:100% и заполняются только до размера окна.

Как я могу решить эту проблему?

Я хочу, чтобы они работали практически во всех браузерах, важно работать даже в IE7.

Я могу решить это с помощью JS/JQuery, но я хотел бы знать, есть ли лучший способ сделать это.

<body>
    <div id="left"><img src="Imagini/Left_01.jpg" alt="" /></div>
    <form id="form1" runat="server">
    <div id="left_edge"><img src="Imagini/LeftEdge.jpg" alt="" /></div>
        <div id="q">

        </div>
        <div id="right_edge"><img src="Imagini/rightedge_04.jpg" alt="" /></div>
    </form>
    <div id="right"><img src="Imagini/right_05.jpg" alt="" /></div>
</body>
</html>

body 
{
    margin:0 0 0 0;
    font-size: 13px;
    font-family:"Verdana", Sans-Serif;
}

#left 
{
    float:left;
    width: 116px;
}

#left_edge
{
    width:22px;
    float:left;
    min-height: 10px;
    height:100%;
    background: url('../Imagini/LeftEdge.jpg');
    background-repeat:repeat-y;
}

#form1
{
    background: #FAFAFA;
    width:700px;
    float:left;
}

#q 
{
    float:left;
    width:656px;
}

#right 
{
    width:693px;
    float:left;
}

#right_edge
{
    width:22px;
    float:left;
}

ПОСЛЕДНЕЕ РЕДАКТИРОВАНИЕ: Я не говорю о том, чтобы не иметь полосы прокрутки. Я хочу, чтобы эта полоса прокрутки видела всю страницу, но мне нужно по вертикали заполнить #left_edge и #right_edge фоном на всю высоту своего родителя.

Пожалуйста, посмотрите на образ

Стороны с тенями отсутствуют.

Источник

1 ответ

Я просто попытался и добавил эти два в #left_edge, и прокрутка не появилась

position: fixed; 
overflow: hidden;
Источник
Другие вопросы по тегам