Тело { высота: 1000 пикселей; } в файле css не работает, но работает встроенно

Оба файла находятся в папке Atom. html находится в атоме/. css находится в атоме/css/. Почему «тело {высота: 1000 пикселей;}» не меняет высоту тела, а встроенный css делает? Я узнал об этом после безуспешной попытки заставить тело содержать все div. Использование редактора атомов и использование Firefox и Chrome для просмотра страницы с помощью инструментов разработчика. Любая помощь будет благодарна. Извините, если весь код бельмо на глазу, я просто изучаю html сам и нахожу довольно много подводных камней.

<html>
<head>
  <meta name = "viewport" content = "width=device-width, inital-scale=1">
  <title>
    Secular Humanists of Rochester
  </title>
  <link rel = "stylesheet" type = "text/css" href = "css/bodyfixed.css">
</head>
<body>
</body>
</html>

Cache-Control: max-age=8640;
body{
  height: 1000px;
}

html css

10.12.2020 17:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

113

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это работает отлично. Удалите эту строку «управление кешем» в верхней части CSS.

Хотя даже когда ставишь, я вижу высота около 1000px.

body{
  height: 1000px;
}
#navi{
  /*background-color: #bf0000;*/
  display: inline;
  /*top| left| bottom| right*/
}
#navbar{
  /*margin:auto;*/
  display: inline;
  width: 52%;
  float: left;
  font-size: 1.3vw;
  margin-left: 1em;
  background-color: white;
  padding: 0.8em 0em 1.2em 0em;
}
#rectanglelink{
  background-color: #bf0000;
  /*border:1px #ccc solid;*/
}
.listsw{
  text-decoration: none;
  /*background-color: white;*/
  border:1px black solid;
  color: black;
  border-radius: 20px;
  padding: 0.75em 1em 0.5em 1em;
}
.listsb{
  text-decoration: none;
  background-color: black;
  border:1px black solid;
  color: white;
  padding: 0.75em 1em 0.5em 1em;
  border-radius: 20px;
}
.learnmore{
  text-decoration: none;
  /*background-color: white;*/
  border:1px black solid;
  color: black;
  border-radius: 20px;
  padding: 1em 1em 0.75em 1em;
  font-size: 1.2vw;
  font-weight: normal;
}
.headlink{
  text-decoration: none;
  background-color: white;
  /*border:1px white solid;*/
  color: black;
  font-family: verdana,courier,arial;
  padding: 0em 0.5em;
  word-spacing: 0em;
  font-family: helvetica,courier,arial;
}.headlinkf{
  text-decoration: none;
  background-color: white;
  /*border:1px white solid;*/
  color: #4267B2;
  font-weight: bold;
  font-family: verdana,courier,arial;
  padding: 0em 0.5em;
  word-spacing: 0em;
  font-family: helvetica,courier,arial;
  font-size: 1.5vw;
}
#shorhead{
  display: inline;
  /*text-decoration: bold;*/
}
#linky{
  text-align: right;
  font-size: 1.3vw;
  display: inline;
  float: right;
  vertical-align: center;
  margin-top: 1.2em;
  height: 20px;
  width: 39%;
  margin-right: 0.5em;
}
#opacity{
  z-index: 2;
  background-color: white;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
}
.container{
  position: relative;
  /*top: center;*/
  /*color: black;*/
  /*
  padding: 0px;
  margin: 0px;
  border: 0px;
  */
}
.centered{
  position: absolute;
  top: 10%;
  left: 5%;
  font-size: 1.3vw;
  width: 45%;
  height: 80%;

}
#gardens{
  z-index: 0;
  width: 99.95%;
  margin: 0px;
  padding: 0px;
  border: 0px;
  /*display: inline;*/
}
#textimage{
  z-index: 4;
  display: inline;
  position: absolute;
  top: 29%;
  left: 15%;
  width: 100%;
}
#textimage2{
  text-align: center;
  z-index: 5;
  font-size: 4vw;
  width: 68%;
  padding: 1%;
  font-family: helvetica,courier,arial;
  font-weight: 700;
}
#linky2{
  position: absolute;
  left: 7.5%;
  font-family: helvetica,courier,arial;
}
#aboutus{
  position: absolute;
  width: 80%;
  height: 80%;
  left: 12.7%;
  top: 5.4em; <!-- or 5.4em or 13.5em-->
  bottom: 5.4em;
  /*background-color: blue;*/
  text-align: center;
}
#abouttext{
  float: right;
  width: 40%;
  padding-right: 10%;
  font-size: 1vw;
  color: black;
  text-align: left;
  padding-top: 0.8%;
  font-family: verdana,helvetica,courier,arial;
  line-height: 200%;
}
#hands{
  float: left;
  width: 45%;
}
#aboutustitle{
  font-size: 3vw;
  font-weight: bold;
  font-family: helvetica,courier,arial;
  padding-top: 3.5%;
}
#gardens{
  padding: 0px;
  border: 0px;
  margin: 0px;
}
#hand{
  width: 100%;
}
#onehundredpx{
  width: 100%;
  height: 1000px;
  float: left;
}
#whatishumanism1{
  position: absolute;
  width: 80%;
  height: 80%;
  left: 12.7%;
  margin-top: 25.4em; <!-- or 5.4em or 13.5em-->
  bottom: 5.4em;
  background-color: blue;
  text-align: center;
  /*z-index: 100;*/
}
#colorpeople{
  float: left;
  width: 45%;
}
#world{
  width: 90%;
}
#humanismtext{
  float: right;
  width: 40%;
  padding-right: 10%;
  font-size: 1.3vw;
  color: black;
  text-align: left;
  padding-top: 0.8%;
  font-family: verdana,helvetica,courier,arial;
  line-height: 200%;
  font-weight: bold;
  /*background-color: blue;*/
}

<html>
<head>
  <meta name = "viewport" content = "width=device-width, inital-scale=1">
  <title>
    Secular Humanists of Rochester
  </title>
  <link rel = "stylesheet" type = "text/css" href = "css/bodyfixed.css">
</head>
<body>
  <div class = "container">
    <div id = "navi">
      <div id = "navbar">
        <h1 id = "shorhead">Secular Humanists of Rochester</h1>
      </div>

      <div id = "linky">
        <a class = "headlink" href = "http://secularhumanistsofrochester.org">Home</a>
        <a class = "headlink" href = "#about">About</a>
        <a class = "headlink" href = "#what">What We Do</a>
        <a class = "headlink" href = "#Contact">Contact Us</a>
        <a class = "headlink" target = "_blank" href = "https://www.meetup.com/Rochester-Secular-Humanism-Meetup/">Join</a>
        <a class = "headlinkf" target = "_blank" href = "https://www.facebook.com/Rochester.Humanists">f</a>
      </div>
    </div>
  </div>
  <br>
    <!--<a id = "rectanglelink" href = "meetup.com">Meetup</a>-->
  <div class = "container">
    <img id = "gardens" src = "images/gardens-of-ireland.jpg">

    <div class = "centered">
      <div id = "opacity"></div>
      <div id = "textimage">
        <div id = "textimage2">
          Secular Humanists of<br> Rochester
        </div>
        <br>
        <div id = "linky2">

          <a class = "listsw" target = "_blank"  href = "https://www.meetup.com/Rochester-Secular-Humanism-Meetup/">Meetup</a>
          <a class = "listsb" target = "_blank"  href = "https://www.facebook.com/Rochester.Humanists">Facebook</a>
          <a class = "listsw" href = "forum">Forum</a>
        </div>
      </div>
    </div>
  </div>
  <div class = "container"><div id = "about"></div>
    <div id = "aboutus">
      <div id = "hands"><img id = "hand" src = "images/colorful-silhouette-hands-background-design-1589987555Wea.jpg"></div>
      <div id = "abouttext">
        <div id = "aboutustitle">About Us</div>
        <br><br>
        The Secular Humanists of Rochester is an affiliate of the American Humanist Association, a 75-year-old organization that has proudly served as the leading voice in America on behalf of humanists, atheists, agnostics, and freethinkers.
        <br><br><br>
        <a class = "learnmore">Learn More</a>
      </div>
    </div>
  </div>
  <br>
  <div class = "container"><div id = "whatishumanism"></div>
    <div id = "whatishumanism1">
      <div id = "colorpeople"><img id = "world" src = "images/globe-304586_edited_edited.png"></div>
      <div id = "humanismtext">
        <!--<div id = "aboutustitle">About Us</div>-->
        <br><br>
        So what is humanism anyway? It is a nontheistic worldview with ethical values informed by scientific knowledge and driven by a desire to meet the needs of people in the here and now. At the foundation of those values is affirmation of the dignity of every human being.
        <br><br><br>
        <a class = "learnmore">Learn More</a>
      </div>
    </div>
  </div>
</body>
</html>
<!--
<div class = "container">
  <div id = "onehundredpx"></div><div>hi</div>
</div>
-->

Большое спасибо, что исправили! В конце концов мне нужно будет знать, как заставить работать управление кешем.

— 10.12.2020 18:15

10.12.2020 18:09