выравнивание по вертикали выше базовой панели навигации - PullRequest
Новая
       10

выравнивание по вертикали выше базовой панели навигации

0 голосов
/ 22 августа 2011

У меня есть веб-страница с панелью навигации внизу страницы (высотой 110 пикселей). То, что я пытаюсь сделать, это установить 2 плавающих элемента div рядом друг с другом в основном содержимом страницы, не выходя за пределы этой панели навигации.

Я все хорошо настроил, но изо всех сил стараюсь выровнять div по вертикали.

У меня есть следующие настройки кода CSS: 

#content {
height: 100%;
width:1200px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
    top: 10px;
position:absolute;
overflow:hidden;
z-index:1;
}

.container {
padding: 5px 5px 5px 5px;
}

.container {
margin:0 auto;
}


.clear {
clear:both;
}

.left {
float:left;
display:inline;
}

.right {
float:right;
display:inline;
 }

#left-column {
float:left;
display:inline;
clear:both;
width:550px;
height:550px;
padding-left:40px;
background-color:#0F0;
}

#right-column {
float:right;
display:inline;
clear:right;
width:550px;
height:550px;
padding-right:40px;
background-color:#F00;
}

HTML это просто: 

<div id='content'>
<div class='container'>
<div id="left-column">content here</div>
<div id="right-column">content here</div>
<br class="clear" />
</div>
</div>

Кто-нибудь знает, как я могу выровнять эти div по вертикали на экране? Я уверен, что есть какой-то CSS-код, который не нужен - я просто взял его с ранее созданной страницы, так что не стесняйтесь сказать мне, чтобы удалить его целые куски, если это необходимо! На данный момент div плавают в верхней части страницы. Когда я смотрю на него на 13-дюймовом экране Macbook Pro, он выглядит хорошо, но как только кто-то смотрит на страницу в более крупном окне браузера, он, несомненно, будет выглядеть очень плохо, с большим количеством пространства между элементами div и панелью навигации ...... Спасибо заранее! JD

1 Ответ

0 голосов
/ 22 августа 2011

не знаю, что именно вы пытаетесь получить, но попробуйте посмотреть, поможет ли это вам .. 

#content {
position:absolute;
top:0;
left:0;
width: 100%;
height: 200%;
overflow:auto;
z-index:1;
}

.container {
padding:5px;
margin:0 auto;
}

#left-column {
position: fixed;
top: 50%;
left: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#0F0;
}

#right-column {
position: fixed;
top: 50%;
right: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#F00;
}

#menu {
position: fixed;
width: 100%;
height: 110px;
bottom:0;
background-color: #ddd;
}
</style>

<div id='content'>
    <div id="left-column">content here</div>
    <div id="right-column">content here</div>
    <div id="menu">menu here</div>
</div>

Вы можете настроить ширину, высоту и т. Д. В соответствии со своими потребностями. дайте мне знать, если это близко к сумме, которую вы хотите

...