CSS: Как определить центрированный div с бесконечными вертикальными границами и начальной высотой 100%?

Первый вопрос по SOF, пожалуйста, будьте осторожны, если это может быть глупый вопрос. :) Не нашел решения ни здесь, ни в Интернете.

У меня проблемы с CSS. Я вставил свой код в конец этого поста, но сначала я объясню, чего я пытаюсь достичь:

Я хочу создать центрированную область содержимого фиксированной ширины с бесконечными вертикальными графическими границами слева и справа.

Вот что я пробовал:

  1. Я создал div #content с div .wrapper внутри. Стандартная процедура центрирования, скажем, div. Предоставил #content свойство фона для левой границы и разделение .wrapper для правого фона. #content works нормально: бесконечная левая граница. Но .wrapper остается той же высоты, что и его содержимое. Так что, если контента меньше, то по высоте браузера граница не будет бесконечной.

  2. Если я установлю высоту контента на 100%, границы будут отображаться до низа страницы, но если контент выше, то браузер высота, и я прокручиваю вниз, границы не продолжаются.

  3. Я вставил еще один div между #content и .wrapper: #contentbr и дал этому div те же свойства, что и #content , но с изображением правой границы : Не работает, высота остается такой же, как и содержимое обертки.

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

Печально: Nr. 2 работает нормально, если я установил для свойства фона #content следующее: _background: url (img / content_left.png) верхний левый repeat-y, url (img / content_left.png) верхний правый repeat-y; _

К сожалению, IE не знает CSS 3, так что это не решение, как я не могу игнорировать IE ..: (

Так что я надеюсь на вашу помощь, ребята. Кто-то должен знать, как делать это волшебство.


Важное замечание по моему примеру HTML и CSS: Я заменил свойства фона на свойства границы. На самом деле левая и правая границы должны быть двумя разными изображениями и использовать закомментированные свойства фона!

HTML и CSS:

<!doctype html>
<html>
<head>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
    <style type="text/css">
        html, body { height: 100%; }

        #content 
        {
            margin: 0 auto;
            width: 950px;

            /* this is the real deal: */
            /* background: url("img/content_left.png") top left repeat-y; */

            /* this is just for the example */
            border-left: 1px solid black;

            height: auto !important;
            height: 100%; /* IE 6 Workaround */
            min-height: 100%;
        }

        #content .wrapper
        {
            /* this is the real deal: */
            /* background: url("img/content_right.png") top right repeat-y; */

            /* this is just for the example */
            border-right: 1px solid black;

            height: auto !important;
            height: 100%; /* IE 6 Workaround */
            min-height: 100%;

            padding: 0px 70px;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="wrapper">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim, 
                vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a dapibus 
                accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in 
                rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris massa elit, pellentesque 
                id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus, 
                auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem. Nam suscipit elit ac est sollicitudin 
                sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum. 
                Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis quis, auctor vitae diam. Donec sed arcu sapien. 
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
            </p>
    </div>
    </div>
</body>
</html>
5
задан Dip Hasan 12 December 2019 в 13:14
поделиться