Исправлена проблема с заголовком и боковой навигацией

Я строю страницу с фиксированной боковой стороной высоты 100%, которая перемещается влево, а оболочка содержимого плавает вправо. Элемент nav имеет фиксированную ширину 300px, и оболочка реагирует и принимает всю ширину после блока nav. Моя проблема в том, что я хочу, чтобы заголовок был исправлен сверху, но как только я изменил его положение, чтобы зафиксировать его, он растягивается на всю страницу, а не на ширину обертки. Не могли бы вы найти, что я могу использовать для этого. См. Код ниже. Благодарю.Исправлена проблема с заголовком и боковой навигацией

HTML

<body> 
    <nav> 
    </nav> 
    <div id="wrapper"> 
     <header> 
     </header> 
     <main> 
      <section> 
      </section> 
      <section> 
      </section> 
      <section> 
      </section> 
     </main> 
     <footer> 
     </footer> 
    </div> 
</body>

CSS

header{ 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 30px; 
    line-height: 30px; 
    background: #fff; 
} 
#wrapper{ 
    padding-left: 300px; 
    float: right; 
} 
nav{ 
    top: 0; 
    width: 300px; 
    min-height: 600px; 
    height: 100%; 
    position: fixed !important; 
    float: left; 
}

источник

2015-03-27 Emil Gurbanov

Если я правильно понимаю ваш вопрос, это, вероятно, что вы пытаетесь получить.

DEMO:http://jsfiddle.net/khhtbf60/

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    min-height: 100%; 
} 
header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
    background: gold; 
} 
nav { 
    position: fixed; 
    top: 30px; 
    left: 0; 
    width: 300px; 
    height: 100%; 
    background: pink; 
} 
#wrapper { 
    padding-top: 30px; 
    padding-left: 300px; 
}

EDIT DEMO 2:http://jsfiddle.net/khhtbf60/2/ (это правильное расположение для какой OP просил)

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    min-height: 100%; 
} 
header { 
    position: fixed; 
    top: 0; 
    left: 300px; 
    width: 100%; 
    height: 30px; 
    background: gold; 
    text-align: right; /*added*/ 
    padding-right: 300px; /*added*/ 
    box-sizing: border-box; /*added*/ 
} 
nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 300px; 
    height: 100%; 
    background: pink; 
} 
#wrapper { 
    padding-top: 30px; 
    padding-left: 300px; 
}

источник

2015-03-27 21:10:02 Stickers

Да, я тоже пробовал этот путь, но если вы попытаетесь изменить выравнивание текста по правому краю элемента заголовка, увидит, что некоторая часть не увидела .. –

@ EmilGurbanov, что легко решить, см. это http://jsfiddle.net/khhtbf60/2/ – Stickers

Спасибо sdcr, это именно то, что я хотел :) Как вы были в первую очередь кто нашел решение, пожалуйста, напишите вам ответ, и я пометю его как правильный :) Спасибо, я много. –

Добавьте атрибут data-role в свой заголовок сНу тега.

Пример:

<div id="header" data-role="header">

И для того, чтобы знать, что 100% на ширину, изменение обертка для:

#wrapper{ 
    width:100%; //or desired width 
    height:100%; //or desired height 
    padding-left: 300px; 
    float: right; 
}

Что в вашем случае будет 300px, хотя это предпочтительным использовать %.

источник

2015-03-27 20:33:01 BIW

Спасибо за ответ, но добавление ширины: 100 % к обертке также растягивает его на всю страницу –

Если я изменю позицию заголовка на относительную, она отлично подходит для обертки, но как только я изменю i t, чтобы зафиксировать его, растягивается –

вы в роли данных, чтобы исправить голову и использовать относительно позиции с CSS, относительная работа должна работать. если нет, получите jsfiddle и покажите мне свою проблему. – BIW

Дайте обертке ширину.

#wrapper{ 
    padding-left: 300px;/*change accordingly*/ 
}

EDIT: Fiddle example

источник

2015-03-27 20:57:47 Fergoso

работает только с пустым заголовком, как только я добавляю текст с выравниванием по тексту: значение справа исчезает где-то :) –

Исправлена ​​проблема с заголовком и боковой навигацией

ответ

Смежные вопросы

Исправлена проблема с заголовком и боковой навигацией