Блог

Главная - Вопросы по программированию - body{ height: 1000px; } в файле css не работает, но работает встроенно

body{ height: 1000px; } в файле css не работает, но работает встроенно

#html #css

#HTML #css

Вопрос:

Оба файла находятся в папке atom. html находится в atom/. css находится в atom/css/ . Почему «body{ height: 1000px;}» не изменяет высоту тела, но встроенный css в это делает? Я узнал об этом после безуспешной попытки заставить body содержать все divs. Использование редактора atom и использование 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;
}

Ответ №1:

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

Хотя даже когда вы его помещаете, я вижу, что высота составляет около 1000 пикселей.

 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>
-->

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

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