高度:100%;不工作 [英] height:100%; not working

查看:119
本文介绍了高度:100%;不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要轮播DIV(s7)展开到整个屏幕的高度。我没有想法,为什么它不成功。要查看该页面,您可以此处

I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea s to why it's not succeeding. To see the page you can go here.

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px 'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
}

.holder {
  height: 100%;
  margin: auto;
}

#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}

#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}





<body>

  <div class="nav">
    <a class="prev2" id="prev2" href="#"><img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png"></a>
    <a class="next2" id="next2" href="#"><img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png"></a>
  </div>

  <div class="holder">
    <tr>
      <td>
        <div id="s7">
          {block:Posts}
          <div id="posts">


推荐答案

必须确定父母的身高。唯一的例外是 root 元素< html> ,可以是百分比高度。 。

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

因此,除了< html> ,您已经给出了所有的元素height你应该做的是添加:

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}



您的代码应该可以正常工作。

And your code should work fine.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

JsFiddle示例

JsFiddle example.

这篇关于高度:100%;不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆