Div не помещается в контейнер

0

Я пытаюсь создать макет с боковой панелью слева и 3 divs, уложенными друг на друга. Тем не менее, я получаю, чтобы мои divs вписывались в контейнер. У меня также возникают проблемы с получением контейнера в соответствии с шириной страницы без принудительного горизонтального прокрутки

#container{
    position: absolute;
    border: 2px solid red;
    top: 0;
    left: 0;
    height: 100%;
    width: 99%;
    padding: 5px;
    margin: 0;
}

Это похоже на мой сайт:

Изображение 174551

http://jsfiddle.net/rwq3d/

  • 0
    Это потому, что все абсолютно позиционировано.
  • 0
    Как мне это позиционировать?
Показать ещё 2 комментария
Теги:
sharepoint

2 ответа

0

Почему бы вам не использовать display: inline-block; Я не уверен, что это полезно, но я бы это сделал:

Это часть HTML:

<body>
    <section id="container">
        <section id="sidebar">
            <ul>
                <li id="menuHome"> <a href='index.html'><span>Home</span></a>

                </li>
                <li id="menuUsers"> <a href='#'><span>Users</span></a>

                </li>
                <li id="menuGroups"> <a href='#'><span>Groups</span></a>

                </li>
                <li id="menuSites"> <a href='#'><span>Sites</span></a>

                </li>
                <li id="menuReports"><a href='#'>
                   <span>Reports</span></a>

                </li>
            </ul>
        </section>
        <section id="content">
            <div id="top">orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor nec risus non ullamcorper. Donec porttitor, elit in adipiscing condimentum, neque lectus tristique augue, a euismod metus diam gravida augue. Etiam neque nulla, dapibus a odio semper, tempus volutpat nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut scelerisque nulla vel turpis luctus, sed euismod quam sodales. Mauris sem leo, tincidunt fermentum felis a, sollicitudin commodo justo. Nulla suscipit facilisis dui, eu viverra odio porttitor vel. Integer iaculis sapien posuere, accumsan lectus ac, euismod risus. Nam in mattis sapien. Sed elementum bibendum condimentum. Vestibulum ac lectus id augue vulputate sollicitudin vel quis purus.</div>
            <hr>
            <div id="middle">Aenean elit ligula, luctus id leo auctor, egestas interdum velit. Praesent sit amet consectetur eros, ut adipiscing eros. Praesent convallis arcu a elementum lobortis. Vestibulum magna ante, imperdiet eget porta eu, interdum vel lorem. Morbi mattis quis dui sed porta. Maecenas varius ac augue a viverra. Nunc velit ipsum, mattis facilisis bibendum ac, venenatis vitae odio. Fusce sed interdum ligula, et consequat lorem.</div>
            <hr>
            <div id="bottom">Aliquam rhoncus purus ac lorem suscipit accumsan. Pellentesque elementum volutpat risus, et consequat lectus pulvinar sed. Nullam posuere at metus vel lobortis. Ut facilisis a velit gravida aliquam. Nam aliquet iaculis vulputate. Vestibulum nec eros cursus, dignissim nulla ut, semper tellus. Curabitur ac ultrices sapien. Donec diam sapien, congue ut libero vitae, mollis adipiscing neque. Quisque interdum, eros vitae tempor elementum, quam lacus dapibus erat, at porttitor nisl nunc in massa. Nam ut nulla orci. Etiam vitae accumsan orci. Phasellus libero dui, tincidunt mollis feugiat ac, fermentum sed nulla. Sed lorem turpis, consequat vitae nibh eget, adipiscing placerat arcu. Phasellus libero mi, eleifend eget nulla eget, accumsan imperdiet dui. Morbi pretium dictum est in posuere.</div>
        </section>
    </section>
</body>

И для CSS:

#container {
    border: 2px solid red;
    height: 100%;
    width: 98%;/*A little smaller than the page no no problems arise*/
    padding: 5px;
    margin: 0;
}
#sidebar {
    vertical-align: top;/*We align the element with the top of the 
    elements adjacent to it.*/
    border: 2px solid blue;
    display: inline-block;/*Inline block makes block elements act as if they were inline. It is very useful for these kind of case. And later on if t}you want the page to be responsive*/
    width: 20%;/*You have to set a width for the element*/
    margin-right : 5px;
}
/*The properties for content are similar to those of the sidebar*/
#content {
    width: 75%;
    border: 2px solid gray;
    display: inline-block;
}
/*You don{t really have to make changes in the elements of the content, since they behave as a block should, they sstack one below the other.*/
#top, #middle, #bottom {
    border: 2px solid green;
}

Я не очень уверен, что это то, что вы ищете. Надеюсь, поможет.

Поделиться
0

Предполагая, что я правильно понял вас, ваша проблема в том, что заполнение фактически увеличивает размер ящиков. Это означает, что если вы дадите коробку шириной 100% и добавьте 1% отступы, вы получите 102% ширины окна (1% слева и 1% справа). Решение в этом случае состояло бы в том, чтобы просто уменьшить ширину коробки до 98%, но с заполнением с фиксированным размером это не так просто.

Тем не менее, есть решение для этого: атрибут box-sizing.

С помощью этого кода:

* {
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}

Обновленный код: http://jsfiddle.net/rwq3d/1/

Поделиться
  • 0
    Это устранило проблему, с которой я столкнулся, когда ящики были вызваны горизонтальной прокруткой. Но у меня все еще есть проблема с div'ами, выходящими за пределы контейнера
  • 1
    Это потому, что как только вы используете position:absolute для любого элемента, он становится блочным элементом и полностью выводится из «потока» содержимого. Он находится в слое, отделенном от обычного содержимого, и поэтому родительский элемент абсолютно позиционированного элемента больше не знает размер своего дочернего элемента. Если вы хотите придерживаться абсолютного позиционирования, вам придется использовать JavaScript, чтобы отрегулировать высоту, или использовать css float с clearfix (много информации в Google) для достижения вашего макета.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню