文章/答案/技术大牛

发布

社区首页 >问答首页 >具有响应性高度的全宽背景

问具有响应性高度的全宽背景
EN

Stack Overflow用户

提问于 2017-01-31 12:55:02

回答 1查看 253关注 0票数 0

我正在尝试使用Foundation来构建一个具有全宽图像和负责任高度的页眉。有没有什么方法可以用CSS来实现，或者我必须使用javascript？你能帮我一下吗？

index.html：

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <header id="page-header">
      <div class="row">
        <div class="background" data-interchange="[image/background.jpg, default],
          [image/small-background.jpg, small],
          [image/medium-background.jpg, medium],
          [image/large-background.jpg, large],
          [image/xlarge-background.jpg, xlarge]">
          <h1 class="text-center">
            <img data-interchange="[image/logo.png, (default)],
              [image/small-logo.png, (small)],
              [image/medium-logo.png, (medium)],
              [image/large-logo.png, (large)],
              [image/xlarge-logo.png, (xlarge)]" alt="Logo" />
            <noscript>
              <img src="image/logo.png" alt="Logo" />
            </noscript>
          </h1>
        </div>
      </div>
    </header>
    <section id="page-content">
      <div id="services" class="row">
        <div class="small-12 columns">
          <h2 class="text-center">Title</h2>
          <p>Text here</h2>
        </div>
      </div>
    </section>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

app.css：

html, body {
  height: 100%;
}

header#page-header {
  height: 100%;
}

header#page-header > div.row {
  height: 100%;
}

header#page-header div.background {
  height: 100%;
  width: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

header#page-header div.background > h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

app.js：

$(document).foundation();

谢谢。

css

zurb-foundation

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2017-01-31 14:05:18

尝试auto，而不是height: 100%

header#page-header div.background {
  height: auto;  // may be this will work for you
  width: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41949892

复制

相似问题

问具有响应性高度的全宽背景
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有响应性高度的全宽背景EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有响应性高度的全宽背景
EN