相关疑难解决方法(0)

我有一个有两列的布局 - 左边div和右边div.

右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.

我试过了height:100%,min-height:100%;等等

我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:

• 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动.
• 100vh仅在视口的可见部分计算,因此当浏览器栏向上滑动100vh时增加(以像素为单位)
• 所有布局都重新绘制并重新调整,因为尺寸已更改
• 对用户体验的糟糕跳跃效果

怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......

您可以在以下位置查看问题:示例站点

任何人都可以帮我/建议一个CSS解决方案吗？

简单的测试代码:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{ …

在3排布局中:

• 顶行应根据其内容确定大小
• 底行应具有固定的高度(以像素为单位)
• 中间行应该展开以填充容器

问题是,当主要内容扩展时,它会删除页眉和页脚行:

HTML:

<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break - ->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS:

section {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  height: 300px;
}
header {
  flex: 0 1 auto;
  background: tomato;
}
div {
  flex: 1 1 auto;
  background: gold;
  overflow: auto;
}
footer …

我打算放弃"浮动"布局,并将css flexbox用于未来的项目.我很高兴看到他们当前版本中的所有主流浏览器似乎都支持(以这种或那种方式)flexbox.

我前往"由Flexbox解决" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/来查看一些示例.然而,"粘性页脚"示例似乎在IE11中不起作用.我打了一下周围,并得到它通过增加工作display:flex的<html>和width:100%在<body>

所以我的第一个问题是:有人可以向我解释这个逻辑吗？我只是摆弄它并且它工作,但我不太明白为什么它的工作方式...

然后有"媒体对象"示例适用于所有浏览器,除了 - 你猜对了 - IE.我也在摆弄它,但没有成功.

因此,我的第二个问题是:在IE中使用"媒体对象"示例是否有"干净"的可能性？

所以我有一个带有标题,主体和页脚的网页.我希望主体填充页面的100%(在页脚和页眉之间填充100%)我的页脚是绝对位置底部:0.每次我尝试将主体设置为100%高度或更改位置或其他东西它也将溢出标题.如果将body设置为绝对位置top: 40(因为我的标题是40px高),它将向下移动40px太远,创建一个滚动条.

我创建了一个简单的html文件,因为我实际上无法从实际项目中发布整个页面/ css.使用示例代码,即使主内容体填满屏幕,它也会向下移动40px(因为我认为是标题).

html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 40px;
  width: 100%;
  background-color: blue;
}

#maincontent {
  background-color: green;
  height: 100%;
  width: 100%;
}

footer {
  height: 40px;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
}

HTML

<html>

<head>
  <title>test</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <div id="maincontent">

  </div>

  <footer></footer>
</body>

</html>

谁知道答案？

有没有一种方法可以用于div扩展到全高？我也有一个粘性的页脚.

这是网页:网站已删除.我正在谈论的中间位是白色div,midcontent有CSS值:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

所以是的,显然height:100%没有用.此外,所有父容器都设置了高度.

这是一般结构

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

我正在尝试使用bootstrap设计此布局.我把徽标和导航栏,但现在我必须插入剩余的div.
我需要将这个div(带问号)扩展到页面的剩余空间(带图片的边距).
我不知道徽标或导航栏百分比高度.

编辑:发布我的代码(Yii框架的源页面)

 <a href="index.html"><img width="150" src="images/logo.png"/></a>
 <nav class="navbar navbar-default">
 <div class="container-fluid">
    <div class="navbar-header">
        <button class="navbar-toggle btn btn-default" data-toggle="collapse" data-target="#yii_booster_collapse_yw0" id="yw1" name="yt0" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button></div>
        <div class="collapse navbar-collapse" id="yii_booster_collapse_yw0">
            <ul id="yw2" class="nav navbar-nav">
                <li class="active">
                    <a href="index.php/site/home">Home</a>
                </li>
            </ul>
            <ul class="pull-right nav navbar-nav" id="yw3">
                <li>
                    <a href="index.php/user/profile/edit">Profile</a>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="index.php/site/home">Options <span class="caret"></span>
                    </a>
                    <ul id="yw4" class="dropdown-menu">
                        <li>
                            <a tabindex="-1" href="index.php/site/contact">Contact Us</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="index.php/user/profile/changepassword">Change password</a>
                        </li>
                    </ul> …

我有一个包含div,我想要至少延伸到窗口的整个高度.如果容器div中有很多内容,我希望它延伸到窗口的高度以上.这有效.

在容器div我有一个图像.在图像之后/之下,我有第二个div.我希望这个嵌套的div垂直拉伸以填充容器div的剩余空间.这不起作用.

我试图在这张图片中说明问题.我希望div来在图文并茂的方式伸展左右图像的侧面,而不是因为它看起来在右侧的右侧图像的边.

以下是我的代码.正如你所看到的,在这段代码中,我甚至没有尝试使图像下的div垂直拉伸,因为没有任何效果."高度:100%"不起作用,因为默认情况下我将"100%"定义为窗口的高度,以使容器div至少伸展到窗口的高度.

样式:

* { 
  margin: 0; padding: 0;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body, html { 
  height: 100%;
}

.container {
  display: block;
  overflow: auto;
  min-height: 100%;
  height: 100%;
  height: auto;
}

.bottom {
  width: 100%;
}

HTML:

<div class="container">

<img  src="image.jpg" width="100%">

<div class="bottom">
LOREM IPSUM
</div>

</div>

请看我的jsfiddle

我希望绿色中间div填充包装的剩余空间,div无论它有多少内容.

如果它重要我也包括bootstrap.

我正在尝试创建一个php库,这就是为什么我需要一个好的Mask,以后可以显示图片.我希望Mask不要大于屏幕大小.我的意思是,必须没有滚动,整体<body>需要只有浏览器窗口的宽度和高度,这样每个子对象<body>都限制在浏览器的帧大小,如果溢出则会缩小.我试着max-width和max-height上<body>,但它不工作.

这是我的代码:

index.html的:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="mother">
    <div id="header">
      <div id="back-link">
        <a href="../">Home</a>
      </div>
      <div id="prev">
        <a href="">next picture</a>
      </div>
      <div id="next">
        <a href="">previous picture</a>
      </div>
      <div id="headline">
        <p class="h2">Our Galery</p>
      </div>
    </div>

    <!-- Content -->
    <div id="container-bild">
      <img src="./bilder/P1130079.JPG" id="img-bild" />
    </div>
  </div>
</body>
</html>

style.css中:

body {
  max-width: 100%;
  max-height: 100%;
}

/* mother-container */
div#mother {
  max-width: 100%;
  max-height: …