Как сделать так, чтобы «дочерние» страницы отображались нормально?

#html #css

#HTML #CSS

Вопрос:

У меня есть домашняя страница, и она отображается так, как должна — ширина составляет 100%, а высота-100%. В нем есть меню (iframe). Из этого меню я перейду на другие страницы (с тем же меню). Но когда я открываю другую страницу из меню, она не имеет 100% ширины и высоты, но структура страницы та же, и стили те же. Как я могу это исправить? Код ПФА index.html:

 @import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;family=Raleway:wght@500amp;family=Source Sans Proamp;display=swap');  html, body {  margin: 0;  padding: 0;  height: 100%;  width: 100%; }  .background {  display: table;  background-color: #01579B;  box-shadow: inset 0 0 10px;  background-size: cover; }  .container {  width: 70%;  height: auto; }  iframe.header {  border: none;  width: 100%;  height: 180px;  margin-left: 10px; }  iframe.menu {  border: none;  width: 100%;  height: 100px;  margin-left: 10px; }  .logo-picture {  height: 150px;  width: 150px;  margin-top: 12px; }  .logo-card {  display: table;  background-color: white;  border-radius: 7px;  box-shadow: 0 0 10px;  margin: 10px;  margin-top: 20px;  background-image: url("img/logo-background.jpg");  height: 150px;  width: calc(100% - 40px); }  .menu {  display: flex;  justify-content: space-around; }  ul.menu gt; li {  list-style: none;  padding: 0;  margin: 0; }  ul.menu {  padding: 0;  margin: 20px 0;  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 30px; }  .logo-link {  display: inline; }  .logo-title {  display: table-cell;  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 45px;  color: white;  text-align: center;  vertical-align: middle;  width: 100%;  height: 100%; }  .menu-card {  background-color: #558B2F;  height: 70px;  display: table;  border-radius: 7px;  box-shadow: 0 0 10px;  margin: 10px;  width: calc(100% - 40px); }  .logo-title gt; a {  color: white;  text-decoration: none; }  .menu a {  color: white;  text-decoration: none; }  .menu a:hover {  color: #0D47A1;  text-decoration: none; }  .content-card {  background-color: white;  border-radius: 7px;  box-shadow: 0 0 10px;  margin: 10px;  width: calc(100% - 80px);  font-family: 'Source Sans Pro', sans-serif;  font-weight: 500;  padding: 20px;  text-align: left; }  .content-card h1 {  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 45px;  margin: 0;  text-align: center;  margin-bottom: 20px; }  .content-card img {  width: 100%; }  .content-card .bold {  font-weight: 900; }  .content-card .italic {  font-style: italic; }  .content-card gt; div {  margin-top: 10px;  margin-bottom: 10px; }  .content-card h2 {  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 35px;  margin-top: 20px;  text-align: center;  margin-bottom: 20px; }  .quote {  border-left-width: 3px;  border-left-color: #FB8C00;  border-left-style: solid;  padding: 10px; } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;titlegt;Board games - домашняя страницаlt;/titlegt;  lt;meta name="description" content="Сайт посвящен настольным играм"gt;  lt;link rel="icon" href="img/icon.png"gt;  lt;link rel="stylesheet" href="styles.css"gt;  lt;/headgt;  lt;bodygt;  lt;div class="background" align="center"gt;  lt;div class="container"gt;  lt;iframe scrolling="no" src="src/header.html" class="header"gt;lt;/iframegt;  lt;iframe scrolling="no" src="src/menu.html" class="menu"gt;lt;/iframegt;  lt;div class="content-card"gt;  lt;h1gt;Зачем взрослые люди играют в настолки?lt;/h1gt;   lt;img src="img/dangeonsAndDragons.jpg" /gt;   lt;div class="bold italic"gt;Спойлер: потому что это весело.lt;/divgt;   lt;div class="italic"gt;Настольные игры с начала своей истории были предметом культа, и в наши дни остаются популярным развлечением. И вовсе не только для детей. Говорим о настольных играх, где повышаются ставки, накаляются нервы, а победителю достаются все сокровища мира. С чего начать?lt;/divgt;   lt;h2gt;Заглянуть в коробкуlt;/h2gt;   lt;divgt;Первое, что нужно знать о настольных играх — для них совершенно не обязателен стол. Скорее всего, первые настольные игры появились даже раньше, чем столы: в них можно было играть на земле и на любой относительно ровной поверхности. Это были игры с костями, глиняными табличками, деревянными и каменными фигурками, которые подбрасывались или выкладывались в определенном порядке. В древних цивилизациях Южной Америки, например, были распространены настольные игры-гонки, а славяне играли в «бирюльки» — так называлась целая группа игр с использованием мелких предметов сложной формы. Задача игроков состояла в том, чтобы «выудить» как можно больше фигур с помощью тонкого крючка.lt;/divgt;   lt;div class="quote"gt;Для настольных игр не нужен тяжелый инвентарь, оборудованная площадка и в большинстве случаев игрокам даже не понадобится двигаться с места.  Хорошая настольная игра может сдружить рабочий коллектив, спасти от скуки в долгом путешествии или поднять настроение, когда кажется, что лето в этом году никогда не начнется.lt;/divgt;   lt;divgt;Тех, кому кажется, что настолки — развлечение для детей, разубедит история. Поскольку в античных настолках большую роль играл счастливый случай, древние люди придерживались принципа «игры — детям не игрушка». Многие игры имели сакральный, религиозный смысл, а их исход считался предзнаменованием. Определенным фигурам или комбинациям приписывались различные истолкования, и далеко не каждый имел право прикасаться к ящику, где хранился игровой набор. В наши дни культ игры продолжается.lt;/divgt;   lt;h2gt;Создать собственный мирlt;/h2gt;   lt;divgt;Бум на настольные ролевые игры начался в 1980-х и продолжается по сей день. Сериал «Очень странные дела», который весь собран из отсылок к культуре 1980-х, начинается со сцены, где четверо школьников играют в знаменитую настольную игру Dungeons and Dragons.lt;/divgt;   lt;img src="img/dangeonsAndDragons2.jpg" /gt;   lt;divgt;Ролевые настольные игры созданы на основе одноименных компьютерных игр и вселенных RPG, а также книг. Партии в них могут длиться месяцами, а кроме поля и фигур, в игре используются листы персонажа. В этих листах игроки указывают свои характеристики — уровень здоровья, магические и боевые способности, снаряжение, дополнительные бонусы, которые изменяются по ходу игры. Эти изменения определяются бросками костей, а также действиями самих игроков, которые влияют на все происходящее.lt;/divgt;   lt;div class="quote"gt;Партии в ролевых настольных играх могут длиться неделями и месяцами.  Важную роль в таких играх играет ведущий — «мастер», который описывает игровые ситуации.lt;/divgt;   lt;divgt;Среди взрослых увлечение играми выходит на новый уровень, и в первую очередь это определяется экономически. Игровые мастера зарабатывают деньги за проведение модулей. Во многих городах, в том числе и в России, для них существуют курсы существуют школы мастеров. Реквизит тоже обходится недешево: например, цены на миниатюры Warhammer достигают десятков тысяч рублей. Кроме того, их коллекционируют и кастомизируют — навык росписи фигурок для настольной игры требует огромной усидчивости и внимательности к деталям.lt;/divgt;   lt;h2gt;Стать манчкином-терминаторомlt;/h2gt;   lt;divgt;Над таким серьезным увлечением грех не посмеяться! Так возникла пародийная серия «Манчкин». «Манчкином» в ролевых играх называют игрока, который играет ради процесса и все усилия бросает на «раскачку» и скоростное прохождение. Фраза «я надену все лучшее сразу» — это про них. Они предпочитают амуницию с большим количеством бонусов, смертоносное оружие, а еще убивают всех, кто попадется под руку, чтобы получить как можно больше сокровищ.lt;/divgt;   lt;img src="img/munchkin.jpg" /gt;   lt;divgt;Именно эта жадность и желание стать самым крутым стали движущей силой игры. За время партии можно превратиться из человека в орка и обратно, умереть сто раз и собрать свое снаряжение заново, попросту стащив его у других героев. Участники собирают карты сокровищ и вступают в схватки с монстрами, чтобы пройти на максимальный уровень. В этом помогают не только свойства карт, но и стратегия самих игроков: они могут обманывать друг друга, устраивать засады и наживаться на чужих победах и поражениях. В игре нет поля, а для того, чтобы складывать карты, можно использовать коробку, поэтому играть в нее можно где угодно, даже в дороге.lt;/divgt;   lt;divgt;Первое издание «Манчкина» сосредоточилось на клише из фэнтезийных игр, но с тех пор создатели выпустили дополнения в самых разных стилистиках: здесь есть пираты, супергерои, инопланетяне. Все колоды можно совмещать, поэтому в одной игре радиоактивный эльф может встретиться с зомби-детективом и образовать с ним команду… до тех пор, пока это будет им выгодно.lt;/divgt;   lt;h2gt;Не довольствоваться малымlt;/h2gt;   lt;divgt;Для тех, кто предпочитает наживаться системно, существуют экономические настольные игры. У них тоже богатая история: в XIX веке печатные настольные игры (в России их называли «картонажные») пришли в педагогику. С их помощью дети осваивали счет и чтение, изучали историю, географию, биологию, также знакомились с важными событиями современности, например, выставками достижений науки и искусства. В 1904 году американка Лиззи Меги придумала игру The Landlord’s Game, которая должна была познакомить детей с важностью труда и основами экономики. Спустя еще 30 лет патент на игру купили предприниматели братья Паркеры, которые превратили ее в известную нам «Монополию».lt;/divgt;   lt;img src="img/monopolia.jpg" /gt;   lt;divgt;«Монополия» выпускает издания на разную тематику — от «Игры престолов» до «Гарри Поттера». Основа остается классической: квадратная доска, на которой по периметру обозначены «предприятия», кубики, набор карт и фишки. В специальных изданиях фишки всегда особенные — например, в «русской Монополии» есть матрешка и пуанты. Поэтому перед партией в «Монополию» убедитесь в том, что у вас есть достаточно места, чтобы разложить доску, и поверхность достаточно стабильная, чтобы фишки не слетали с игрового поля.lt;/divgt;   lt;divgt;Если игровое поле «Монополии» кажется пройденным вдоль и поперек, можно перейти к играм, в которых есть поле генерируется каждый раз заново. К их числу принадлежит «Шакал», игра, которую придумали в России в 1970-х годах. В наборе игры более ста фишек, из которых складывается карта острова сокровищ. После создания острова начинается сбор сокровищ, в котором игрокам волей-неволей придется «шакалить». Все же когда речь идет о наживе, идти к победе придется по головам.lt;/divgt;   lt;div class="italic"gt;Такая воинственная обстановка игр на обогащение полезна с точки зрения психологии коллектива. Настольная игра на работе покажет, как сотрудники реагируют на стрессовые ситуации. Партия в дружеской компании — это способ «спустить пар» и побыть злобным манчкином. Тем более для этого не придется даже вставать с дивана.lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt; 

PFA code of another page:

 @import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;display=swap'); @import url('https://fonts.googleapis.com/css2?family=Amatic SCamp;family=Raleway:wght@500amp;family=Source Sans Proamp;display=swap');  html, body {  margin: 0;  padding: 0;  height: 100%;  width: 100%; }  .background {  display: table;  background-color: #01579B;  box-shadow: inset 0 0 10px;  background-size: cover; }  .container {  width: 70%;  height: auto; }  iframe.header {  border: none;  width: 100%;  height: 180px;  margin-left: 10px; }  iframe.menu {  border: none;  width: 100%;  height: 100px;  margin-left: 10px; }  .logo-picture {  height: 150px;  width: 150px;  margin-top: 12px; }  .logo-card {  display: table;  background-color: white;  border-radius: 7px;  box-shadow: 0 0 10px;  margin: 10px;  margin-top: 20px;  background-image: url("img/logo-background.jpg");  height: 150px;  width: calc(100% - 40px); }  .menu {  display: flex;  justify-content: space-around; }  ul.menu gt; li {  list-style: none;  padding: 0;  margin: 0; }  ul.menu {  padding: 0;  margin: 20px 0;  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 30px; }  .logo-link {  display: inline; }  .logo-title {  display: table-cell;  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 45px;  color: white;  text-align: center;  vertical-align: middle;  width: 100%;  height: 100%; }  .menu-card {  background-color: #558B2F;  height: 70px;  display: table;  border-radius: 7px;  box-shadow: 0 0 10px;  margin: 10px;  width: calc(100% - 40px); }  .logo-title gt; a {  color: white;  text-decoration: none; }  .menu a {  color: white;  text-decoration: none; }  .menu a:hover {  color: #0D47A1;  text-decoration: none; }  .content-card {  background-color: white;  border-radius: 7px;  box-shadow: 0 0 10px;  margin: 10px;  width: calc(100% - 80px);  font-family: 'Source Sans Pro', sans-serif;  font-weight: 500;  padding: 20px;  text-align: left; }  .content-card h1 {  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 45px;  margin: 0;  text-align: center;  margin-bottom: 20px; }  .content-card img {  width: 100%; }  .content-card .bold {  font-weight: 900; }  .content-card .italic {  font-style: italic; }  .content-card gt; div {  margin-top: 10px;  margin-bottom: 10px; }  .content-card h2 {  font-family: 'Amatic SC', cursive;  font-weight: 700;  font-size: 35px;  margin-top: 20px;  text-align: center;  margin-bottom: 20px; }  .quote {  border-left-width: 3px;  border-left-color: #FB8C00;  border-left-style: solid;  padding: 10px; } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;titlegt;Board games - Топ настольных игрlt;/titlegt;  lt;meta name="description" content="Сайт посвящен настольным играм"gt;  lt;link rel="icon" href="../img/icon.png"gt;  lt;link rel="stylesheet" href="../styles.css"gt;  lt;/headgt;  lt;bodygt;  lt;div class="background" align="center"gt;  lt;div class="container"gt;  lt;iframe scrolling="no" src="header.html" class="header"gt;lt;/iframegt;  lt;iframe scrolling="no" src="menu.html" class="menu"gt;lt;/iframegt;  lt;div class="content-card"gt;  lt;divgt;Раз два триlt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt; 

Комментарии:

1. На первой странице есть lt;link rel="stylesheet" href="styles.css"gt; , а на второй странице есть lt;link rel="stylesheet" href="../styles.css"gt; . Находятся ли первая и вторая страницы в одном каталоге?

2. @RobMoll нет, вторая страница находится в каталоге «src», а первая-index.html, расположенный в корневом каталоге

3. Почему вы используете .background {display: table;} ?

4. @Azu, потому что в других случаях свойства отображения фон не покрывал всю страницу (как вы можете видеть, там много контента). Дисплей: таблица была первым рабочим решением.

5. Ольга, при использовании display:table div обернет внутреннее содержимое , так что контейнер с классом .background обернет внутреннее содержимое.