Внешний CSS не выполняется

-1

Я пытаюсь сохранить фиксированный заголовок на месте на веб-странице, а основной контент при прокрутке не перемещается по главному заголовку.Внешний CSS не выполняется

Я не понимаю, почему встроенный CSS работает так, как ожидалось, но при переключении одних и тех же свойств CSS во внешнюю таблицу стилей он не работает. Внешняя таблица стилей находится как первый <div> имеет свои свойства правильно. Я попытался использовать оба id и class во втором div, но ни один из них не работает. Это код с использованием идентификаторов, а не классов.

index.html:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
    </head> 
    <body style="height:100%; width:100%"> 
     <div id="fixed-header"> 
      <h1>Page Heading</h1> 
     </div> 
     <div id="main-content"> 
      <!-- a number of articles and sections --> 
     </div> 
    </body> 
</html>

CSS/style.css:

#fixed-header { 
    position:fixed; 
    height:100px; 
    top:0px; 
    overflow:hidden; 
} 

#main-content { 
    position:absolute; 
    top:100px; 
    left:0px; 
    right:0px; 
    overflow:auto; 
}

Там нет другого кода CSS.

Если я меняю <div id="main-content"> на <div style="position:absolute; top:100px; bottom:100px; left:0px; right:0px; overflow:auto;">, он работает.

Что я делаю неправильно?

источник

2016-03-24 Pxterra

Я понимаю, что есть дно: 100px в встроенном CSS и что нет во внешней таблице стилей. – Pxterra

Если я добавлю дно: 100px во внешнюю таблицу стилей, он работает. Нужно понять, почему, но, по крайней мере, это работает. – Pxterra

Это сводится к базовому пониманию CSS.

Если вы указали только верхний элемент абсолютно позиционированного элемента, остальная часть этого элемента будет обычно меняться (его высота будет высотой содержимого внутри элемента). Когда абсолютно позиционированный элемент достаточно высок, чтобы выйти из нижней части экрана, это создает полосу прокрутки в body/html.

Помещение объекта bottom на ваш контент ограничивает высоту вашего контента, поэтому сам элемент содержимого содержимого может прокручиваться отдельно от тела.

https://css-tricks.com/almanac/properties/p/position/

источник

2016-03-24 21:12:10 user2867288

Нет никакой разницы между встроенным CSS и наличием его во внешней таблице стилей. Это красная сельдь. Я не вижу никакого примера в вопросе, который свидетельствует об этом. Кстати, его пример «inline» имеет свойство «bottom», определенное ... вероятно, поэтому, у него отсутствовало свойство во внешней таблице стилей. – user2867288

Прочтите комментарии ниже вопроса. Ответчик понял, что они допустили ошибку, поскольку встроенный CSS и внешний CSS не совпадают, и теперь они спрашивают, как работает свойство 'bottom' CSS. – user2867288

Я ценю ваш ответ. Мне показалось немного странным, что даже указав дно: 0px во внешнем CSS он работал, но, опуская его, основное содержимое просто прокручивалось по фиксированному заголовку. – Pxterra

-1

Вы должны поставить высоту тега HTML тоже!

Посмотрите это jsfiddle

html, body {height:100%}

источник

2016-03-24 21:17:28 user3157083

Я думаю, что вам не хватает большой пункт здесь. Это путь браузер отдает предпочтение стилям, прикрепленных к веб-странице:

INLINE> ON-PAGE> ВНЕШНИЙ

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

И если вы хотите сказать, получите результат 100px, то во внешнем файле css укажите высоту и ширину как 100px после высоты и ширины как 100%.

источник

2016-03-24 21:20:38

Почему? Это потому, что вы исправляете div с 100px в botton, и вы закрываете окно, если хотите, чтобы вы дали div шириной 0px влево и 0px прямо сейчас, вы можете сказать ширину 100%, чтобы вы отложили его (div) и width nov для высоты, которую вы говорите, оставайтесь на 100px от вершины высоты обзора, а затем вы говорите, что остаетесь 100px снизу, поэтому вы «закрыли» коробку, и теперь ваш переполнение может работать правильно. Я надеюсь, что это объясняло немного, почему из-за что

источник

2016-03-24 21:23:16 DanyCode

Внешний CSS не выполняется

ответ

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