Question

这是我的fiddle，当我最小化窗口时，标题的高度设置为min-height：80px，因为响应时标题图像下方有空白区域，有没有添加任何方法最小高度标题高度应自动调整？

注意：我之所以将min-height：80px添加到标题是因为在我的css中所有包装器都处于固定位置

HTML -

<div class="wrapper">
  <header class="header">
    <img src="http://www.emedicalpoint.com/images/nav/sprite.jpg" alt="">
  </header>
  <div class="content">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <footer>
    footer content here
  </footer>
</div>

CSS -

img {
  width: 100%;
}

.wrapper {
  bottom: 0;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
}

header {
  background: yellow none repeat scroll 0 0;
  height: 80px;
  min-height: 80px;
  width: 100%;
}

.content {
  bottom: 40px;
  position: fixed;
  top: 80px;
  width: 100%;
}

footer {
  background: #414141 none repeat scroll 0 0;
  bottom: 0;
  color: #fff;
  height: 40px;
  position: fixed;
  width: 100%;
}

Answer 1

尝试使用响应div时，应避免以像素为单位给出固定高度。试试这个：

    img {
        width: 100%;
        height: 100%;
    }

    header {
        background: yellow none repeat scroll 0 0;
        height: 10%;
        width: 100%;
    }

    .content {
        bottom: 40px;
        position: fixed;
        top: 10%;
        width: 100%;
    }

现在，我给出的百分比只是为了说明目的，你必须找到合适的百分比。

Answer 2

是的，您可以通过以下方式使用jquery在窗口调整大小上更改图像属性...

$(window).resize(function () { if ($(window).height() < AAA) { $('header img').height(AAA); } });

在上面的代码中，AAA表示没有像素。

由于最小高度标题图像不正确，我们可以通过jquery左右来修复它

2 个答案: