标签: height

纵向高度和景观高度以点为单位.

我在使用flexbox列时遇到麻烦,因为flex'd元素的子元素不会以height百分比形式响应.我只在Chrome中检查过此内容,据我所知,这只是Chrome的问题.这是我的例子:

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

这是CodePen.

我想要它,所以红色.flex-child填充蓝色.flex.为什么不起作用height:100%？

我需要使用预定义的高度制作以下代码

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

但由于span是内联元素,因此"height"属性不起作用.

我尝试使用div代替,但它将扩展到上部元素的宽度.宽度应该灵活.

任何人都可以建议任何好的解决方案吗？

提前致谢.

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

如上所示的(1)的内容是未知的,因为它可以在动态生成的页面中增加或减少.如上所示的第二个div(2)应填充剩余空间.

这是我的HTML的一个例子

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

三网融合

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

或者这种方法错了吗？我该怎么做？请看我的演示并告诉我我的错误.

我有一个帮助页面,help.php,我加载一个iframe里面main.php我怎样才能得到这个页面的高度,一旦它在iframe中加载？

我问这个是因为我无法将iframe的高度设置为100%或auto.这就是为什么我认为我需要使用javascript ..我正在使用jQuery

CSS:

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS:

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" …

我需要以编程方式将imageview的高度设置为matchparent.如果它是一个固定的高度,我知道如何设置.

但我怎么能把它设置为matchparent？

编辑:

实际上父布局的高度是动态的.所以我需要将imageview的高度设为父级的高度.

我刚刚使用默认的Master Details模板创建了一个简单的iOS 7应用程序.

在MasterViewController.m,viewDidAppear方法,我登录了

self.navigationController.navigationBar.frame.size.height
self.navigationController.navigationBar.frame.origin.y

并因此收到44和20.这看起来很奇怪,因为根据我的阅读,iOS 7中的导航栏应该是64点高度并从0点开始,因此它位于状态栏下方.我读到的是

1)iOS 7 UI过渡指南

因为状态栏是透明的,所以它后面的视图显示出来

2)在导航栏中使用背景图像

如果您的应用使用自定义图像作为条形图的背景,则需要提供"更高"的图像,使其向上延伸到状态栏后面.导航栏的高度从44点(88像素)更改为64点(128像素).

我的布局有一个容器flex-container和一个孩子.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

容器和孩子的身高不明.目标是:

• 如果孩子的高度低于容器,则它看起来水平和垂直居中.
• 如果孩子的高度高于容器,它会调整到顶部和底部,我们可以滚动.

方案:

使用flexbox对元素进行居中的最快方法如下:

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi …

我的HTML代码只是将页面分为两列,分别为65%,35%.

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div> 

在response div,我有可变数据; 在note div,我有固定的数据.尽管两者div有两组不同的数据,但我需要它们以相同的高度显示,以便背景颜色看起来填充包含两者的框.当然,问题在于response div,其高度根据当前在其中显示的数据量而变化.

我怎样才能确保两列的高度始终相等？

因此警报给出了宽度和高度的未定义值.我认为来自img.onload计算的图像的w和h值没有被传递给要返回的值,或者它可能在onload计算它们之前返回w和h :

function getMeta(url){
 var w; var h;
 var img=new Image;
 img.src=url;
 img.onload=function(){w=this.width; h=this.height;};
 return {w:w,h:h}    
}

// "http://snook.ca/files/mootools_83_snookca.png" //1024x678
// "http://shijitht.files.wordpress.com/2010/08/github.png" //128x128

var end = getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
var w = end.w;
var h = end.h;
alert(w+'width'+h+'height');

如何让警报显示正确的宽度和高度？

http://jsfiddle.net/YtqXk/