Question

我正在建立一个广告区域的网站，供人们访问，作为我自己的任务。

我花了一些时间尝试将目前为止所做的全部放在一页上。我希望没有滚动条，我不想让滚动条隐形等等，我的意思是让网页适合浏览器的一个页面而不需要用户滚动以达到审美目的。

我已经玩过div的宽度和高度以及其他一些东西，试图达到我想要的结果但不幸的是没有成功。为了实现这一目标，我需要对代码进行哪些更改？

body,
td,
th {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
body {
  margin: 0px;
}
#navigation {
  color: white;
  background-color: #292526;
  width: 100%;
  padding: 0.5% 0.5%;
}
#navigationLeft {
  width: 24.5%;
  display: inline-block;
  vertical-align: middle;
  font-size: 180%;
}
#navigationRight {
  width: 74.5%;
  display: inline-block;
  vertical-align: middle;
}
#navigation ul {
  float: right;
}
#navigation ul li {
  display: inline;
}
#navigation a {
  font-size: 120%;
  color: white;
  text-decoration: none;
}
#banner {
  line-height: 0;
}
#footer {
  color: white;
  background-color: #292526;
  width: 100%;
  padding: 0.5% 0.5%;
  text-align: center;
}

<div id="container">
  <div id="navigation">
    <div id="navigationLeft">
      <a href="#">Visit Clare Ireland</a>
    </div>
    <div id="navigationRight">
      <ul>
        <li><a href="#">Home |</a>
        </li>
        <li><a href="#">Maps |</a>
        </li>
        <li><a href="#">Hotels |</a>
        </li>
        <li><a href="#">Appartments |</a>
        </li>
        <li><a href="#">Attractions |</a>
        </li>
        <li><a href="#">Essentials |</a>
        </li>
        <li><a href="#">Bars & Clubs |</a>
        </li>
        <li><a href="#">Transport</a>
        </li>
      </ul>
    </div>
  </div>
  <div id="banner">
    <img src="http://i.imgur.com/VsIRZNZ.jpg" alt="The Cliffs of Moher" />
  </div>
  <div id="footer">
    <p>Placeholder Text</p>
  </div>
</div>

Answer 1

类似于以下内容：

Example here

它不多但提出了一个想法，但它也将取决于屏幕内容和你想要多少，太多，然后这可能会导致一个问题，简约然后很好，但厨房水槽然后哎哟！

      <div class="container">
      <header>
        <div class="logo">
          <a href="#">Visit Clare Ireland</a>
        </div>
        <nav>
          <ul>
            <li><a href="#">Home |</a>
              </li>
              <li><a href="#">Maps |</a>
              </li>
              <li><a href="#">Hotels |</a>
              </li>
              <li><a href="#">Appartments |</a>
              </li>
              <li><a href="#">Attractions |</a>
              </li>
              <li><a href="#">Essentials |</a>
              </li>
              <li><a href="#">Bars & Clubs |</a>
              </li>
              <li><a href="#">Transport</a>
              </li>
          </ul>
        </nav>
      </header>
      <main>
        <section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quis laborum, ea repellat! Eius sint, minima nulla asperiores excepturi. Fuga libero exercitationem soluta nam perspiciatis, sit iusto enim asperiores quibusdam.

        </section>

      </main>
      <footer>
        <p>Footer content</p>  
      </footer>
      </div>

CSS

      html,
      body {
        margin: 0;
        padding:0;
        box-sizing: border-box;
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
        font-size: 16px;
      }


      header {
        margin: 0 auto;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: #292526;
        color: white;
        overflow: hidden;
        box-sizing: inherit;
      }

      header:before,
      header:after {content: " ";display: table;}
      header:after {clear: both;}

      header .logo {
        margin-top: 20px;
        position: relative;
        float: left;
        width: 40%;
      }

      header nav {
        position: relative;
        float: left;
        width: 60%;
        text-align: left;
      }

      header a:link,
      header a:visited,
      header a:active {
        margin: 0 auto;
        padding: 0;
        padding-left: 20px;
        font-size: 26px;
        text-decoration: none;
        color: white;
        text-align: center;
      }

      nav ul {
        list-style: none;
      }

      nav ul li {
        display: inline-block;
      }

      nav ul li a:link,
      nav ul li a:visited,
      nav ul li a:active {
        margin: 0;
        padding: 0;
        font-size: 12px;
        text-decoration: none;
        color: white;
      }

      main {
        margin: 0;
        padding: 0;
        position: fixed;
        top:80px;
        bottom: 50px;
        left: 0;
        right:0;
        width: 100%;
        height: 100%;
        background: white url('http://i.imgur.com/VsIRZNZ.jpg') no-repeat center center;
        background-size: cover;
      }

      main section {
        margin: 0;
        padding: 20px;
        position: relative;
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: 20px;
        width: 93%;
        background: rgba(255,255,255,.4);
      }

      footer {
        margin: 0 auto;
        padding: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: #292526;
        color: white;
      }
      footer p {
        margin: 0;
        padding: 0;
        padding-top: 10px;
        text-align: center;
        font-size: 12px;
        text-transform: uppercase;
      }

HTML / CSS：遇到有关站点宽度/高度的问题

1 个答案: