如何摆脱网页底部的空白?

时间:2019-04-02 16:09:12

标签: html css

在此网站上创建的所有页面上,底部都有空白。我不知道这是我的HTML还是CSS。都包括两个片段。 http://ventricular.org/TheVentricularFoundation/Fellowships.html

谢谢!

body {
  margin: 0;
  padding: 0;
  background: #161616;
}

body,
input,
textarea,
select {
  font-family: 'Roboto', sans-serif;
  font-size: 14pt;
  font-weight: 300;
  line-height: 1.75em;
  color: #777;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  color: #777;
}

h2 {
  letter-spacing: -0.025em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
}

strong,
b {
  font-weight: 500;
  color: #000000;
}

em,
i {
  font-style: italic;
}

a {
  text-decoration: none;
  color: #80BA8E;
}

a:hover {
  text-decoration: underline;
}

sub {
  position: relative;
  top: 0.5em;
  font-size: 0.8em;
}

sup {
  position: relative;
  top: -0.5em;
  font-size: 0.8em;
}

hr {
  border: 0;
  border-top: solid 1px #ddd;
  margin: 6em 0 0 0;
  padding: 6em 0 0 0;
}

blockquote {
  border-left: solid 0.5em #ddd;
  padding: 1em 0 1em 2em;
  font-style: italic;
}

p,
ul,
ol,
dl,
table {
  margin-bottom: 1em;
}

header {
  margin-bottom: 1.6em;
}

header h2 {}

header .byline {
  display: block;
  margin: 1.5em 0 0 0;
  padding: 0 0 0.5em 0;
}

footer {
  margin-top: 1em;
}

br.clear {
  clear: both;
}

.pennant {
  color: #bbb;
}


/* Sections/Articles */

section,
article {
  margin-bottom: 3em;
}

section> :last-child,
article> :last-child {
  margin-bottom: 0;
}

section:last-child,
article:last-child {
  margin-bottom: 0;
}

.row>section,
.row>article {
  margin-bottom: 0;
}


/* Images */

.image {
  display: inline-block;
}

.image img {
  display: block;
  width: 100%;
}

.image.featured {
  display: block;
  width: 100%;
  margin: 0 0 2em 0;
}

.image.full {
  display: block;
  width: 100%;
  margin-bottom: 2em;
}

.image.left {
  float: left;
  margin: 0 2em 2em 0;
}

.image.centered {
  display: block;
  margin: 0 0 2em 0;
}

.image.centered img {
  margin: 0 auto;
  width: auto;
}


/* Lists */

ul.default {
  margin: 0;
  padding: 0em 0em 1.5em 0em;
  list-style: none;
}

ul.default li {
  padding: 0.60em 0em;
  font-size: 0.95em;
  border-top: 1px solid;
  border-color: rgba(0, 0, 0, .1);
}

ul.default li:first-child {
  padding-top: 0;
  border-top: none;
}

ul.default {}

ul.style li {
  margin: 0;
  padding: 2em 0em 1.5em 0em;
  border-top: 1px solid;
  border-color: rgba(0, 0, 0, .1);
}

ul.style li:first-child {
  padding-top: 0;
  border-top: none;
}

ul.style img {
  float: left;
  margin-right: 20px;
}

ul.style a {
  color: #434343;
}

ul.style .posted {
  padding: 0em 0em 1em 0em;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 8pt;
  color: #A2A2A2;
}

ul.style .first {
  padding-top: 0px;
  border-top: none;
}


/* Buttons */

.button {
  position: relative;
  display: inline-block;
  background: #80BA8E;
  padding: 0.8em 2em;
  text-decoration: none !important;
  font-size: 1.2em;
  font-weight: 300;
  color: #FFF !important;
  -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  text-align: center;
  border-radius: 0.25em;
}

.button:hover {
  background: #70AA7E;
  color: #FFF !important;
}


/*********************************************************************************/


/* Icons                                                                         */


/* Powered by Font Awesome by Dave Gandy | http://fontawesome.io                 */


/* Licensed under the SIL OFL 1.1 (font), MIT (CSS)                              */


/*********************************************************************************/

.fa {
  text-decoration: none;
}

.fa.solo {}

.fa.solo span {
  display: none;
}


/*********************************************************************************/


/* Social Icon Styles                                                            */


/*********************************************************************************/

ul.contact {
  padding: 1.5em 0 0 0;
  list-style: none;
  cursor: default;
}

ul.contact li {
  display: inline-block;
  margin: 0 1em;
}

ul.contact li span {
  display: none;
  margin: 0;
  padding: 0;
}

ul.contact li a {
  color: inherit;
  font-size: 1.75em;
  display: inline-block;
  -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
}

ul.contact li a:hover {
  color: #fff;
}


/*********************************************************************************/


/* Header                                                                        */


/*********************************************************************************/

#header {
  position: relative;
  background: url(/TheVentricularFoundation/Images/header.jpg) no-repeat bottom center;
  background-attachment: fixed;
  background-size: cover;
  text-align: center;
}

#header:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(64, 64, 64, 0.125);
}


/*********************************************************************************/


/* Logo                                                                          */


/*********************************************************************************/

#logo {
  position: relative;
  z-index: 1;
}

#logo h1 {
  color: #FFF;
}

#logo a {
  display: block;
  text-decoration: none;
  font-weight: 300;
  line-height: 1em;
  font-size: 7em;
  color: #FFF;
  letter-spacing: -0.05em;
  margin: 0 0 0.125em 0;
}

#logo span {
  font-size: 1.4em;
  color: #FFF;
}


/*********************************************************************************/


/* Nav                                                                           */


/*********************************************************************************/

#nav {}

#nav-wrapper {
  background: rgba(0, 0, 0, .1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#nav>ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

#nav>ul>li {
  display: inline-block;
  border-right: 1px solid;
  border-color: rgba(255, 255, 255, .1);
}

#nav>ul>li:last-child {
  padding-right: 0;
  border-right: none;
}

#nav>ul>li>a,
#nav>ul>li>span {
  display: inline-block;
  padding: 1.5em 1.5em;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.1em;
  outline: 0;
  color: #FFF;
}

#nav li.active a {
  color: #FFF;
}

#nav>ul>li>ul {
  display: none;
}


/*********************************************************************************/


/* Main                                                                          */


/*********************************************************************************/

#main {
  position: relative;
  background: #fff;
}

.homepage #content {
  text-align: center;
}

.homepage #content header h2 {}

#sidebar h2 {
  display: block;
  padding-bottom: 0.50em;
}


/*********************************************************************************/


/* Footer                                                                        */


/*********************************************************************************/

#footer {
  position: relative;
  text-align: center;
}

#footer header h2 {
  color: #FFF !important;
}

#footer header .byline {
  color: rgba(255, 255, 255, .2);
}


/*********************************************************************************/


/* Copyright                                                                     */


/*********************************************************************************/

#copyright {
  position: relative;
  text-align: center;
  color: #774535;
}

#copyright .container {
  padding: 3em 0em;
  border-top: 1px solid;
  border-color: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .1);
}

#copyright a {
  text-decoration: none;
  color: rgba(255, 255, 255, .2);
}


/*********************************************************************************/


/* Featured                                                                      */


/*********************************************************************************/

#featured {
  position: relative;
  background: #f2f2f2;
  text-align: center;
}

#featured h3 {
  display: block;
  font-weight: 300;
}

#featured .pennant {
  font-size: 4em;
}

#featured .button {
  margin-top: 1.5em;
}


/*********************************************************************************/


/* Tweet                                                                         */


/*********************************************************************************/

#tweet {
  position: relative;
  text-align: center;
  background: url(/TheVentricularFoundation/Images/header.jpg) no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
}

#tweet:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(64, 64, 64, 0.5);
}

#tweet section {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: rgba(255, 255, 255, .1);
}

#tweet blockquote {
  position: relative;
  border: none;
  margin: 0;
  font-weight: 300;
  color: rgba(255, 255, 255, .6);
}
</head>

<body class="homepage">

  <!-- Header -->
  <div id="header">
    <div id="nav-wrapper">

      <!-- Nav -->
      <nav id="nav">
        <ul>
          <li class="active"><a href="The Ventricular Foundation.html">Home</a></li>
          <li><a href="Who are we.html">Who are we?</a></li>
          <li><a href="What we do.html">What do we do?</a></li>
          <li><a href="Teaching.html">Teaching</a></li>
          <li><a href="Mentorship.html">Mentorship</a></li>
          <li><a href="Fellowships.html">Fellowships</a></li>
          <li><a href="Become a member.html">DONATE!</a></li>

          <li><a href="http://ventricular.org/">Ventricular.org</a></li>
        </ul>
      </nav>
    </div>
    <div class="container">

      <!-- Logo -->
      <div id="logo">
        <h1><a href="#">The Ventricular Foundation</a></h1>
        <span class="tag"></span>
      </div>
    </div>
  </div>
  <!-- Header -->
  <!-- Main -->
  <div id="main">
    <div class="container">
      <div class="row">

        <!-- Content -->

        <section>
          <header>
            <h2>Exam Fees
              <h2>
          </header>
          <ul class="style">
            <font size="4">
              <li>


                The Ventricular Foundation offer fellowships for underrepresented high school students to help cover the costs of exams, exam materials, and application fees for college and graduate school. AP Exams - $53/exam (after discount code). Many High School
                students are enrolled in Advanced Placement (AP) classes. Taking &ldquo;college level curricula&rdquo; not only prepare high school students for university, but also grant them the opportunity to obtain college credit upon successful completion
                of the course. To obtain college credits, students must take the AP exam for their respective class and obtain a score of 3 or higher (on a scale of 1-5) . These exams are optional, but some low-income students do not take these exams
                because of funding issues. There are no fee waivers readily available for students as there are for SAT/ACT college entrance exams. However, there is a discount code that reduces the exam fee from $90 to $53 for low income students. The
                Ventricular Foundation can help fund the exam fee for low income students who are prepared to take the exam and who meet eligibility criteria. To apply, click the green button below!
            </font>

            <div id="main">
              <div class="container">
                <div class="row">

                  <!-- Content -->

                  <section>
                    <header>
                      <h2>College Entrance Exam Prep Materials</h2>
                    </header>
                    <ul class="style">
                      <font size="4">
                        <li>
                          College Entrance Exam Prep Materials - $25/book. The Ventricular Foundation funds exam prep materials (SAT/ACT) that are not readily available to some low-income high school students. To apply, click the green button below! </font>

                      <div id="main">
                        <div class="container">
                          <div class="row">

                            <!-- Content -->

                            <section>
                              <header>
                                <h2>College Application Fees</h2>
                              </header>
                              <ul class="style">
                                <font size="4">
                                  <li>
                                    College Application Fees - $~70/school (after fee waiver). The University of California (UC) and California State University System (CSU) offer application fee waivers for up to 4 schools in each of their respective school systems, granted that the student
                                    meets the required financial income requirements listed on their website. If a student chooses to apply to more than 8 schools, The Ventricular Foundation can help cover the additional cost of application fees for eligible
                                    students. Student who qualify for the IUC and CSU waiver also qualify for The Ventricular Foundation fellowships. To apply, click the green button below! </font>

                                <div id="main">
                                  <div class="container">
                                    <div class="row">

                                      <!-- Content -->

                                      <section>
                                        <header>
                                          <h2>Eligibility Criteria</h2>
                                        </header>
                                        <ul class="style">
                                          <font size="4">
                                            <li>
                                              <p><b>Criteria (all four should be met):</b></p>
                                              <p> 1. Students are the first in their family to go to college and come from an economically disadvantaged background. </p>
                                              <p> 2. Students from Hispanic and various underrepresented backgrounds. </p>
                                              <p> 3. Students who have the potential to succeed in academia if given both the opportunity and support. </p>
                                              <p> 4. Live in California</p>
                                              <br>
                                              <p> <b>You are considered from an economically disadvantaged background if one of the following apply:</b></p>
                                              <p align="left">&bull; You're enrolled in or eligible to participate in the National School Lunch Program (NSLP).</p>
                                              <p align="left">&bull; Your annual family income falls within the Income Eligibility Guidelines set by the USDA Food and Nutrition Service (For example, if household income for family of 3 is under $38,443, then the student
                                                is eligible for fee waiver).</p>
                                              <p align="left">&bull; You're enrolled in a federal, state, or local program that aids students from low-income families (e.g., Federal TRIO programs such as Upward Bound).</p>
                                              <p align="left">&bull; Your family receives public assistance.</p>
                                              <p align="left">&bull; You live in federally subsidized public housing or a foster home or are homeless.</p>
                                              <p align="left">&bull; You are a ward of the state or an orphan.</p>

                                              <p> <b>Deadlines:</b></p>
                                              <p>1. College Applications: October 30th, 2019</p>
                                              <p>2. SAT/ACT College Entrance Exams: Rolling admissions</p>
                                              <p>3. Advanced Placement (AP) Exams: March 1st , 2020</p>
                                          </font>
                                          <br>
                                          <center>
                                            <section class="9u">

                                              <a href="https://forms.gle/mfJXMxEj32c6z4qHA" class="button button-style1">
                                                <font size="6"> Apply to Ventricular Foundation Fellowships Here! </font>
                                              </a>

                                            </section>
                                          </center>

                                      </section>
                                    </div>
                                  </div>
                                </div>
                            </section>
                          </div>
                        </div>
                      </div>
                </div>
                </section>
              </div>
            </div>
      </div>
      <!-- Main -->
      <div id="main">
        <div id="content" class="container">
          <section>
            <header>
              <DIV ALIGN=center>
                <font size="4">
                  <h2>DONATE!</h2>

                  <span class="byline">Donate to The VENTRICULAR FOUNDATION today</span>
              </DIV>
            </header>
            <DIV ALIGN=center>

              <p>DONATE and you will contribute to the teaching and learning of Neuroscience!</p>
              </font>





              <DIV ALIGN=center>




                <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                  <input type="hidden" name="cmd" value="_s-xclick">
                  <input type="hidden" name="hosted_button_id" value="6CRS99W9Z5T5Q">
                  <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" width="200" height="65">
                  <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                </form>
                <DIV ALIGN=center>
          </section>

          </DIV>
          </section>
          </div>
          </div>


          <!-- Tweet -->
          <div id="tweet">
            <div class="container">
              <section>
                <blockquote>"El cerebro es un mundo que consta de numerosos continentes inexplorados y grandes extensiones de territorio desconocido" </p>- Santiago Ram&oacute;n y Cajal</blockquote>
                <blockquote>"The brain is a world consisting of a number of unexplored continents and great stretches of unknown territory" </p>- Santiago Ram&oacute;n y Cajal</blockquote>
              </section>
            </div>
          </div>

          <!-- Footer -->
          <div id="footer">
            <div class="container">
              <section>
                <header>
                  <h2>Contact Us</h2>
                  <span class="byline">Please contact us with any questions or comments</span>
                </header>


                <section class="right social">
                  <a href="https://www.facebook.com/theventricularfoundation"><img class="icon" src="/TheVentricularFoundation/Images/icons/facebook.png" width="32" height="32" alt="facebook"></a>
                </section>



              </section>
            </div>
          </div>

          <!-- Copyright -->
          <div id="copyright">
            <div class="container">
              Design: <a href="http://templated.co">TEMPLATED</a> Images: <a href="http://unsplash.com">Unsplash</a> (<a href="http://unsplash.com/cc0">CC0</a>)
            </div>
          </div>

</body>

</html>

0 个答案:

没有答案