相关疑难解决方法(0)
无论封闭内容的高度如何,如何让包装器<div>填充浏览器的100%高度？
这个问题似乎已经以各种形式回答了无数次,但我仍然找不到适合我的答案.简而言之,我有这样的布局:
<body>
<div class="wrapper">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
我希望wrapper在浏览器中水平居中,并填充浏览器高度的100%.每个封闭<div>元素都有一个固定的高度,通常高于一个高于浏览器窗口高度的高度.如果是这种情况,我会得到我想要的布局.
但是,如果浏览器窗口的高度大于所包含<div>元素的组合高度(例如,在iMac或纵向iPhone方向上的情况),那么wrapper似乎停止footer了其余部分的结束.这下面的窗口是<body>背景.的wrapper背景和<body>背景不同的颜色,所以这是很明显,这是如此.
有没有人有这样的CSS解决方案,以便wrapper填充浏览器高度,无论这个高度是大于还是小于内容的组合高度？
编辑:答案:
答案是下面的答案和我刚刚发生的事情的组合:在CSS中,执行以下操作:
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
.wrapper {
height: auto; /* These two lines were the key. */
min-height: 100%
/*overflow: hidden;*/ /* Do not use this, it crops in small browsers. */
margin: 0px auto;
padding: 0px auto; …推荐指数
解决办法
查看次数
创建一个按列流动的 CSS 网格，具有基于内容的动态列和行
我有一个动态数量的元素（所有相同的维度）。我想将它们放置在网格中，以便它们按列排序，列数基于可用容器宽度，行数基于元素数。
例如，假设有 9 个元素：
1 4 7
2 5 8
3 6 9
但是如果容器宽度扩大：
1 3 5 7 9
2 4 6 8
或收缩：
1 6
2 7
3 8
4 9
5
当项目按行而不是按列定位时，这可以正常工作。此外，如果我明确设置行数，它工作正常，但如果我对行和列使用自动填充，它只会在一行中显示所有内容。
这是我希望呈现为 3x3 网格的一个简单示例：https : //codepen.io/anon/pen/ZxPQNd
1 4 7
2 5 8
3 6 9
1 3 5 7 9
2 4 6 8
推荐指数
解决办法
查看次数
HTML覆盖高度覆盖整个可见页面
我有一个网页,使用AJAX加载一些东西.我想在加载过程中显示带有加载指示符的叠加层,这样用户就无法与大部分页面进行交互 - 除了顶部的菜单.我正在使用jQuery和jQuery BlockUI插件来执行此操作.
我调用$(element).block()并且它工作正常,但覆盖只延伸到我页面的当前内容.随着更多内容被加载并添加到页面中,叠加层随之向下移动,这看起来有点难看.理想情况下,我希望它从一开始就覆盖整个页面的可见区域.这样做的一个简单方法就是为叠加设置一个较大的高度值,如下所示:
$(myElement).block({
overlayCSS: {
height: '10000px'
}
});
...但这会创建一个滚动条!如何避免这种情况并将其设置为覆盖可见页面的正确高度,但不能将其放大？
推荐指数
解决办法
查看次数
使div和子div至少延伸到浏览器窗口的整个高度
我需要有沿着我的主体div的左侧和右侧延伸的图像(实际上是在div下面的一种阴影效果).
如果不是因为我希望这个div可以扩展,而且我需要它在IE7和IE8中工作,我希望它能扩展到至少页面的底部.
我尝试使用polyfill来获得CSS3魔法,但他们也没有工作(我试过PIE和一些没有运气的过滤器).
我觉得我已经尝试了一切......这让我来到这里!这是我通过CSS/html获得的,我觉得我应该能够让它工作,但到目前为止还没有雪茄:
<div class="left-image">
<div class="right-image">
main body text
</div>
</div>
使用以下css:
html,body{
height: 100%
}
.left-image{
background: transparent url('image/url.png') repeat-y top left;
min-height: 100%; /*this alone works for making outer div extend browser & content height*/
min-width: 960px;
max-width: 1280px;
margin: 0 auto;
}
.right-image{
background: transparent url('image/url.png') repeat-y top left;
height: 100%; /*this only makes the div the height of its content*/
}
这导致.left-image div填充浏览器窗口的高度或内容的高度(以较大者为准),但.right-image div仅适合内容的高度(因此,如果内容小于浏览器窗口它不会填充它).
有什么方法吗？只是使用jQuery？
推荐指数
解决办法
查看次数
用css制作div大小相同的聪明方法？
我有两个不同内容的div,并希望它们具有相同的高度和宽度.将高度和宽度设置为固定的像素大小似乎是一个坏主意,因为它们的大小可能会根据浏览器/屏幕大小而有所不同.将宽度设置为百分比有效,但百分比不是高度的选项.
有没有办法确保两个div具有相同的尺寸而不设置固定的像素大小？或固定像素尺寸真的那么糟糕？
推荐指数
解决办法
查看次数
响应图像按窗口高度缩放
与将图像设置为:相同的方式:
img {max-width: 100%;}
例如:https://jsfiddle.net/kvp7n29n/10/ ...当你使浏览器窗口的宽度变小时,按比例缩放图像,当浏览器的高度变小时,如何获得相同的缩放效果？
我试图完成的最终效果就像你在许多响应式灯箱上看到的那样,例如:http://dimsemenov.com/plugins/magnific-popup/ .
^^我不一定想制作灯箱本身,但是当你点击那里的单个图像演示时,注意到灯箱会出现图像,无论你缩小浏览器窗口的宽度或高度,图像都在灯箱在缩小时保持成比例.
那么如何才能在上面的jsfiddle中对那只小猫进行同样的比例缩放效果呢？.
推荐指数
解决办法
查看次数
不同的身份背景为不同的UI路由器状态
在简化的场景中,我有两个UI-Router状态,并希望它们具有不同的主体背景颜色.
理想情况下,我想做以下事情:
<body ng-class="background" ui-view>
</body>
然后在状态控制器中设置背景类(可能是动态的,意思是:在控制器中计算):
stateHelperProvider
.state({
name: 'a',
url: '/a',
templateUrl: 'views/a.html',
controller: function ($scope) {
$scope.background = 'bg1';
}
})
.state({
name: 'b',
url: '/b',
templateUrl: 'views/b.html',
controller: function ($scope) {
$scope.background = 'bg2';
}
});
但是将ui-view属性放在正文上会删除它.所以我必须把ui-view属性放在体内的div上.
<body>
<div ui-view></div>
</body>
我现在如何控制身体背景？
我知道各种hacks(例如在onEnterUI-Router 的函数中访问body的类DOM属性,...),但有一个很好的方法吗？
或者是关于制作div[ui-view]完整高度(这不是微不足道)并在此元素上设置背景来模仿如何在身体上应用背景占据整个视口？
推荐指数
解决办法
查看次数
我在另一个具有特定宽度的div中有一个div,但我希望子div的宽度为百分比,浏览器屏幕大小不是它的父div？
我在另一个具有特定宽度的div中有一个div,但我希望子div的宽度为百分比,浏览器屏幕大小不是百分比与其父div,这意味着当我将子div的宽度设置为50%时,我希望它大小为浏览器屏幕的50%而不是其父元素的50%,我不想将其从父子中移除它的重要,任何方式实现这一点而不将其从子节点中删除？
PS-请不要回答JQuery.CSS或Javascript.如果它可以通过CSS实现它真的很棒,但javascript也会没问题.
推荐指数
解决办法
查看次数
如何扩展<div>以填充其父级，而不根据其自身内容扩展？
语境
我正在制作一个允许创建csgo绑定/配置文件的网站，所以我将页面分为两半：左侧是用户输入，右侧是配置结果。
在每个面板的末尾都有一个按钮，用于计算输入并下载文件，但是我想一直保持可见状态（当前，它们在页面底部，我需要滚动查找他们）。
对于一个面板，我们有：
由于标题和按钮处于“已知”位置，是否可以扩展lorem ipsum div，将按钮推到面板底部，而不会溢出屏幕？
我不想使用绝对属性，因为期望可以适应较小的屏幕（那时，两个面板将位于另一个面板的下方）。
我尝试了一些东西flex-grow，没有说服力。
我没有为lorem ipsum div 定义高度；我想覆盖面板的最大值，而不会溢出它。
这是一些简化的代码：
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem …推荐指数
解决办法
查看次数
flex-grow在列布局中不起作用
我试图views-cntnr占用任何未使用的空间views-cntnr和menubardiv.为此,我将flex显示设置为列方向.然后我将flex-grow属性设置views-cntnr为1.似乎没有做任何事情.的jsfiddle
注意:不确定这是否重要,但我有一些嵌套的flex显示.
HTML
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section class="analysis">
<div class="menubar">
<div class="view-ctrls text-center">
<div class="btn-group" role="group">
<button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button>
</div>
</div>
</div>
<div id="views-cntnr">
<div class="r1">
<div id="v1" class="view">V1</div>
<div id="v2" class="view">V2</div>
<div id="v3" class="view">V3</div>
</div>
<div class="r2">
<div id="v4" class="view">V4</div> …推荐指数
解决办法
查看次数