У меня есть левый столбец position:fixed с шириной 250 пикселей и высотой 100%, и я пытаюсь разместить фиксированную горизонтальную полосу в верхней части, но справа от левого столбца, как этот пример:
Но это то, что я получаю здесь:
Это то, что я сделал:
.page-wrapper, html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.left-column {
position:fixed;
top:0;
left:0;
z-index:1000;
width:250px;
height:100%;
background:#090909;
}
.top-bar {
position:fixed;
top:0;
left:250px;
width:100%;
height:54px;
background:#090909;
z-index:1000;
}
Как я могу сделать этот фиксированный верхний барный диапазон на 100% шириной экрана, не выливаясь. Я надеюсь, что это простое исправление, поскольку я просто потратил возрасты на создание довольно сложного отзывчивого шаблона и только что заметил после добавления контента, что вещи в правой части моего верхнего бара исчезли с экрана!
У меня есть одна идея, но она может быть не самой идеальной, поэтому сначала заинтересованы в других предложениях. Левому фиксированному столбцу может быть присвоено более высокое значение z-индекса, чем верхняя строка, удалите левый край из верхнего бара, а вместо этого поместите левое поле в верхнее содержимое панели, то же, что и ширина левого столбца, Звучит путающе, но возможно.
Очень простое решение, которое не потребует последней версии CSS, вовсе не устанавливает width. Вместо этого просто установите right: 0, что заставит правую границу верхней панели сидеть на правой границе, как это видно в этой скрипке.
.top-bar {
position:fixed;
top:0;
left:250px;
right:0;
height:54px;
background:#090909;
z-index:1000;
}
Я добавил красную рамку, чтобы было легче увидеть, где заканчивается ящик.
Вместо использования left: 250px используйте padding-left:250px в сочетании с box-sizing: border-box:
.top-bar {
position:fixed;
top:0;
left:0;
width:100%;
height:54px;
background:#090909;
z-index:1000;
padding-left: 250px;
-moz-box-sizing: border-box:
box-sizing: border-box:
}
Попробуйте это
.left-column {
float:left;
width:150px;
height:100px;
background:#090909;
color:white;
}
.top-bar {
margin-left:150px;
background:yellow;
border:2px solid red;
}