Возможно ли удаление макета боковой панели без CSS-выражения? - PullRequest
Новая
       8

Возможно ли удаление макета боковой панели без CSS-выражения?

0 голосов
/ 11 ноября 2009

У меня есть следующий макет с боковой панелью, которая присутствует только на некоторых страницах, а не на других. Если боковой панели нет, #main должен заполнить доступную ширину контейнера.

Это работает, но использует CSS-выражение - возможно ли достичь того же макета без этого выражения? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/* reset css */

* {
    border: 0px none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: 100%;
}

/* end reset */

#container {
    margin: 0 auto;
    width: 800px;
    background-color: red;
}

#sidebar {
    display: inline;
    float: left;
    width: 130px;
    background-color: green;
}

#main {
    float: left;
    background-color: blue;
    width: expression(document.getElementById('sidebar') == null ? "100%" : "670px");
    max-width: 100%;
}

#sidebar + #main {
    width: 670px;
    background-color: yellow;
}

#clear {
    clear: both;
    height: 1px;
    font-size: 0px;
}
</style>
</head>
<body>
<div id="container">
    <div id="sidebar"><p>This is the side bar</p></div>
    <div id="main"><p>This needs to expand to fill available width, what if I have sufficient content in here to push this div so it spans across the whole width of the page like so...</p></div>
    <div id="clear"></div>
</div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 11 ноября 2009

Окончательное решение: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/* reset css */

* {
    border: 0px none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-size: 100%;
}

/* end reset */

#container {
    margin: 0 auto;
    width: 800px;
    background-color: red;
}

#sidebar {
    float: left;
    width: 130px;
    background-color: green;
}

#main {
    background-color: blue;
}

.with-sidebar #main {
    margin-left: 130px;
}
</style>
</head>
<body>
<div id="container" class="with-sidebar">
    <div id="sidebar"><p>This is the side bar</p></div>
    <div id="main"><p>This needs to expand to fill available width.</p></div>
</div>
</body>
</html>
1 голос
/ 11 ноября 2009

Селектор смежности + сделает это, за исключением IE6, где он не поддерживается. Обычный обходной путь - добавить дополнительную информацию о классе: 

<div id="container" class="with-sidebar">

и затем выберите в таблице стилей: 

#sidebar { float: left; width: 130px; }
.with-sidebar #main { margin-left: 130px; }

Это необходимо расширить, чтобы заполнить доступную ширину

Тогда не пытайтесь заставить его плавать; Я не уверен, чего он должен достичь.

Также избегайте «наследовать» правила, они не работают в IE до версии 8.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...