标签: css-position
IFRAME和相互冲突的绝对头寸
我想使用以下CSS动态调整IFRAME:
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
但是,没有浏览器似乎支持这一点.
在良好的浏览器中,我可以使用引用的CSS样式将IFRAME包装在DIV中,并将IFRAME的高度和宽度设置为100%.但这在IE7中不起作用.没有使用CSS表达式,有没有人设法解决这个问题？
更新
MatTheCat回答了一个场景,如果IFRAME直接位于正文下方且body/html标签的高度为100%,则该场景有效.在我最初的问题中,我没有说明IFRAME的位置以及适用于它的容器的样式.希望以下解决这个问题:
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
让我们假设以下容器CSS:
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
如果您现在放在height: 100%IFRAME上,它将无法正确调整大小.
推荐指数
解决办法
查看次数
如何在可滚动的div中制作固定的头表？
我想固定我的桌子的标题.表存在于可滚动div中.以下是我的代码.
<div id="table-wrapper">
<div id="table-scroll">
<table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Status</th>
<th>Vol Number</th>
<th>Bonus Paid</th>
<th>Reason for no Bonus</th>
</tr>
</thead>
<tbody>
<tr>
<td><%=snd.getOrderId()%></td>
<td><%=snd.getDateCaptured()%></td>
<td><%=snd.getOrderStatus()%></td>
<td>Data Not Available</td>
<td>Data Not Available</td>
<td>Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
下面是我的CSS,我用于上面的div:
#table-wrapper {
position:relative;
}
#table-scroll {
height:250px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:white;
color:black;
}
#table-wrapper table thead th .text {
position:absolute; …推荐指数
解决办法
查看次数
固定div在bootstrap列中
我试图让使用自举一个两列响应式布局,在左栏我想下一个菜单,在右侧的图片库.我希望菜单在滚动右边的图像时保持固定.
困难在于我希望固定菜单具有引导布局的流畅性.所以,当滚动时,我不希望它向上和向下移动我不希望它调整画面时祭出.
这个网站就是我的意思的一个例子:http: //www.galeriebertrand.com/artists
我似乎无法弄清楚它是如何在此网站上完成的,它似乎并不像左边的列有固定的定位.
推荐指数
解决办法
查看次数
在iOS上的位置固定元素上滚动问题
我正在构建一个移动项目,该项目有许多模块,其中元素定位为固定的.面临的问题仅限于在iOS上运行的浏览器.确切的问题是,每当我滚动页面的主体(例如底部工具栏)固定时,整个固定元素分别与滚动一起移动,一旦滚动完全结束,那么只有它回到它的指定的地方.
我给页面的主体一个相对的CSS规则.请帮助,因为这只发生在iOS上.
.add-to-block {
background: #fff;
position: fixed;
bottom: 0px;
right: 0px;
display: block;
height: auto;
width: 100%;
*(inner content element) {
inner content element styling...
}
}
推荐指数
解决办法
查看次数
CSS使用负相对定位问题
我有一个标题,主体和页脚.标题和主体都有正确的样式.现在对于页脚我想让它出现在主体后面,所以我使用了:
z-index: -1;
position: relative;
top: -60px;
这给出了期望的结果,但我在底部获得了60px的额外空间.
如何清除这个额外的空间？
推荐指数
解决办法
查看次数
如何从中心定位元素绝对 - CSS
对于客户端,我需要将包含广告的正文左侧的绝对div放在一起.到目前为止,我弄清楚如何做到这一点的唯一方法是创建一个绝对div.这里的问题是,在绝对定位的div中,有一个黑色空间(这是身体的末端),我需要拥有这个"阴沟空间"广告来拥抱页面.
为了解决这个问题,最好的方法是将此位置设置为远离页面中心的一定数量的像素.我以为我可以通过以下代码执行此操作:
position: absolute;
left:50%;
margin-right:500px;
但是,这只是将div保持在页面的中心.是否可以从页面中心定位绝对div？
推荐指数
解决办法
查看次数
如何在页眉和页脚之间使DIV高度达到100%
有没有办法设置布局,使标题是50px,正文是100%,页脚是50px？
我希望身体至少用完整个观察区域.我希望网页和页眉始终在屏幕上
推荐指数
解决办法
查看次数
流体宽度固定位置
想像:
<div class="outer">
<div class="inner">
</div>
</div>
哪里:
.outer是列结构的一部分,它的宽度是百分位数,因此是流动的..inner表示fixed应该填充100%宽度的.outer元素的位置元素.然而,它的位置垂直保持不变fixed.
我试图用以下CSS实现这个布局:
.outer {
position: relative;
width: %;
}
.inner {
position: fixed;
width: 100%;
}
但是,.inner不会将其宽度计算为relative其父级的百分比.相反,它填充窗口/文档的整个宽度.尝试任何left或right属性会导致相同的父级忽略质量.
有没有办法解决？
推荐指数
解决办法
查看次数
CSS定位填充容器:宽度与左/右？
考虑到:
- 对于绝对位于相对定位的容器内的元素.
- 如果希望元素填充容器的宽度.
- 该元素也是底部对齐的.
最大化浏览器兼容性是否最好为元素设置width像素,或者只使用left和right？
任何方法都需要注意任何常见的错误？
显然,使用left: 0;和right: 0;会使代码在图像的宽度或填充要改变的情况下更容易管理,但没有任何缺点,其中width: 300px将有利于呢？
推荐指数
解决办法
查看次数
在Chrome中编辑粘性输入元素会导致页面滚动到顶部
position: sticky当我注意到里面有输入字段或文本区域等可编辑元素时,我试图在我的个人项目中使用css ,触发页面滚动到顶部.
如果可能的话,我真的想删除这种行为.
.container {
height: 5000px;
}
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
}<h1>Lorem Ipsum</h1>
<div class="container">
<div class="heading">
<input placeholder="Edit this while scrolling...">
</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
</div>推荐指数
解决办法
查看次数
标签 统计
css ×10
css-position ×10
html ×4
fixed ×1
fluid-layout ×1
iframe ×1
ios ×1
scroll ×1
sticky ×1
width ×1