CSS Позиционирование / Высота Расширение Полная Страница

Question

Эй, ребята, у меня проблемы с позицией CSS.В основном у меня есть боковая панель, которая установлена ​​слева от экрана, которая в основном включает в себя все мои ссылки для навигации.Я хочу, чтобы боковая панель расширялась до нижней части экрана, независимо от того, свернул ли пользователь браузер или развернул его, или их разрешение.Даже если страница прокручивается, я хочу, чтобы div прошел до самого конца.У меня много проблем с этим, и я не могу заставить его работать правильно.Вот мой код, если кто-то определит причину, по которой он не работает, любая помощь будет высоко оценена.

HTML:

    <div id="welcome">

                Welcome <br> to My Site!<br>

                    <span style="color: red; ">(Beta)</span>

            <div id="sidebar"><a href="index.php">Home</a></div>

            <div id="sidebar"><a href="link">link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="forumPage.php">Forum</a></div>

            <div id="sidebar"><a href="link">About</a></div>

            <div id ="sidebar"><a href="link">Requests</a></div>

            <div id="sidebar" ><a href="unity.php">"Pr0j3ct Un1ty"</a></div>

            <div style="font-size: 20px;">Logged in as: <?php echo $_SESSION['username']; ?> </div>

            <div id = "sidebar" >

                <a href = "logoff.php">Logout</a>   </div>

            <div style=" font-size: 16px;"><a href="accountSettings.php">Account Settings</a></div>


            <div style="margin-left: 10px; position: absolute; bottom: 0px; font-size: 16px;"><b>© jm1llz 2010</b></div>


</div>

Страница CSS:

#welcome

{

width: 15%;

float: left;

background-color: darkgrey;

height: 100%;

text-align: center;

font-size: 24px;

font-family: Comic Sans MS;

font-weight: bold;
}

Answer 1

Я думаю, что вы спрашиваете: «Как сделать два столбца одинаковой высоты?»

Если это вопрос, существуют различные «хитрости», чтобы сделать это через CSS (например, рекомендация медика), нов эти дни я настоятельно рекомендую просто использовать javaScript.Это довольно тривиально, особенно если вы используете что-то вроде jQuery.

Когда документ готов, возьмите высоту каждого элемента, а затем выньте более короткий на высоту, равную более высокой.

Answer 2

Лучший способ - использовать фоновое изображение. Если вы сейчас не используете фоновое изображение тела, тогда проще всего создать изображение с шириной боковой панели.

body {
    background-image: url(/images/bg.jpg); /* Wherever your image is located */
    background-repeat: repeat-y;
}

Это заставит изображение идти до самого дна, независимо от того, насколько высока ваша боковая панель.

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

Если вы используете фоновое изображение тела, тогда создайте еще один div с ...

div { width: 100%; height: 100%; } /* You may need a float: left; as well */

... и поместите вышеуказанный фоновый CSS внутри нового div. Затем вам нужно будет добавить этот новый div прямо внутри тега в вашем HTML.

Answer 3

Самый простой практический способ - добавить изображение bg на элемент, содержащий плавающую боковую панель, с цветом / графикой bg, которая повторяется по вертикали. убедитесь, что в контейнере есть переполнение / clearfix.