标签: css-position
CSS div 100%高度
我正在开发这个网站,我希望右侧边栏有100%的高度.
body {
height: 100%;
min-height: 100%;
position: relative;
}
mydiv {
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 290px;
}
我已经阅读了很多答案,特别是这个(Prestaul答案): 当内容超出窗口大小时,在绝对定位的元素上设置100%的高度.
但对我来说这个技巧不起作用,小提琴例子也不起作用!
推荐指数
解决办法
查看次数
CSS Positions如何工作,为什么绝对元素相互堆叠而不是一个接一个地堆叠
怎样才能既#row1并#row2在下面的代码是可见的,一前一后垂直,仿佛根本没有什么absolute/relative定位参与？
<body>
<div class="container">
<div id="row1" class="row">
<div class="col1">Hello</div>
<div class="col2">World</div>
</div>
<div id="row2" class="row">
<div class="col1">Salut</div>
<div class="col2">le monde</div>
</div>
</div>
body {position:relative;}
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}
更新
由于此处排除的原因,我需要在CSS规则中提供定位的元素.所以我的问题是,如果不删除上面的CSS就可以实现我正在寻找的东西？.row div即将两者视为"正常" block元素.
更新2
如果指定了足够的高度px,则结果具有预期的外观.但内容是programmitacacally动态所以我不知道事先的高度:(
推荐指数
解决办法
查看次数
固定在chrome mobile上的位置导致元素向上/向下滚动
我正面临这个奇怪的问题,看起来像Chrome手机上的一个错误.
我有一个位置的div:固定; 对齐到屏幕的右上角.在桌面上,它在移动设备上工作正常(它保持原位),然而,当我向上或向下滚动时,div正在移动.我制作了一个视频来更好地解释它:
https://www.youtube.com/watch?v=gCgN6ULkcMg
在向上滚动工作正常
在向下滚动时,一个位置为div的div消失在视口外
我试图在小提琴上隔离问题,但无法重现它.因此,我将整个网站封装在一个小提琴中,问题就此停止了.我还是不明白为什么.
网站隔离在一个小提琴:删除*
直播网站:删除*
此外,我在现场网站上对不同的设备进行了一些测试:
- Chrome移动版:错误
- Chrome桌面:工作正常
- Firefox手机:工作正常
- Safari mobile:工作正常
有人可以解释我为什么Chrome Mobile有这个问题,而其他人没有？
我的立场:固定div看起来像这样:
div {
position:fixed;
top:10px;
left:0;
width:100%;
text-align:right;
}
*删除了链接,因为它是客户的网站.解决方案在下面的答案中.
推荐指数
解决办法
查看次数
固定位置导航栏只能在iOS5上的Mobile Safari中单击一次
我正在使用Twitter Bootstrap来设计一个iPad优化的网站,并在iOS5的Mobile Safari中遇到一个有趣的错误.
点击固定位置导航栏中的锚链接后,它正确地将我带到该锚点.但是,在滚动页面之前,我无法单击导航栏中的任何其他链接.
问题似乎出现在Bootstrap本身,因为Bootstrap站点有同样的问题:http://twitter.github.com/bootstrap/
有关如何解决这个问题的任何建议？
下面的代码重现了这个问题.请注意,如果单击"Test JS"或"Test jQuery"(两种不同类型的滚动,直接JS或基于jQuery),则在手动移动页面之前,您将无法再次单击.
这是基本的演示代码(.jsp):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#testDiv {
position: fixed;
bottom: 0;
right: 0;
background: gray;
padding: 20px;
}
#jsDiv,
#jQueryDiv {
width: 200px;
display: block;
height: 40px;
background-color: red;
}
#jQueryDiv {
background-color: yellow;
}
</style>
<script type="text/javascript">
function testScroll() {
alert("JS");
scroll(0, 5000);
}
function testjqScroll() {
alert("JQuery");
$(window).scrollTop(500);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
</head>
<body>
<%for (int i …推荐指数
解决办法
查看次数
位置:未指定左/上/右/下时固定 - 在FF/IE中需要结果,但在Safari中不需要
很抱歉不得不问另一个position:fixed相关的问题,但阅读各种其他问题和论坛帖子并没有帮助我解决这个问题.
下面的代码简要演示了我迄今为止position:fixed在项目中的使用方式.我最初(错误)的理解position:fixed是它最初修复了相对于第一个定位的父容器,然后无论视口滚动位置如何都保持在该位置.我现在意识到这是错误的:事实上,position:fixed相对于最外面的容器(即html标签)的position:absolute位置和相对于具有不同位置的第一个父容器的位置static.
通过阅读关于SO的各种其他问题,我意识到我试图实现的效果position:fixed是许多其他人尝试过的效果,但后来意识到只用CSS就不可能:也就是说,相对于容器定位一个元素,但是当页面滚动时,它会保持在相对于视口的位置.
令我困惑的是,上面的内容正是我似乎已经实现的 - 至少在FF和IE8上.使用下面的代码示例,"固定的右窗格内容"最初位于红色"中心可滚动内容"框的右侧,并且与中心内容的顶部垂直对齐.中心内容可以滚动,但右手内容保持原样,就好像它最初在正常文档流中静态定位但此后保持固定在视口中.
我现在意识到这似乎在IE8和FF中"工作"只是因为我没有为元素指定top/ bottom/ left/ right属性fixed.如果我这样做,那么我意识到fixed元素会立即相对于视口定位.
我曾经假设 - 也许是危险的 - 直到现在如果没有指定相对位置,那么position:fixed默认情况下将该元素放置在通常静态放置的位置.至少FF和IE8似乎正在这样做.
但是,在Safari中进行测试表明Safari似乎将该fixed元素放在其容器的左侧.换句话说,没有定位,我的position:fixed元素既不是静态放置的位置,也不是相对于视口位于0,0.
到目前为止,我是否一直依赖于定义非常糟糕的行为,我最好是依靠JavaScript解决方案来实现这种固定定位？或者,这种行为是否为IE/FF定义良好; 有人可以解释Safari的位置背后的逻辑吗？
<style type="text/css">
#content-centre {
margin: 0 auto;
width: 900px;
}
#header {
height: 55px;
position: fixed;
top: 0;
width: 990px;
}
#left-pane {
position: fixed;
top: 12px;
border: 1px green solid; …推荐指数
解决办法
查看次数
Firefox忽略了表格单元格中的绝对定位
我试图绝对将一个元素放在表格单元格中.TD有position:relative和元素有position:absolute.
这在所有浏览器中都很有效,除了在Firefox中它相对于祖先相对容器定位.
你可以在这个小提琴中看到这个:http://jsfiddle.net/ac5CR/1/
有谁知道我是否错过了一些可以在Firefox中修复的CSS设置？
推荐指数
解决办法
查看次数
如何将未知宽度的绝对定位内容居中？
在有人问我为什么要这么做之前,让我直接告诉你.那样你们其中一个聪明的偷看就可以告诉我一个更好的方法......
我正在制作一个能够拉伸以填充页面的绘画的观察者,准确地说是屏幕高度的90%.我想把画作一个接一个地淡化,并希望将它们中心放在画面中间.
为了让画作相互褪色,我需要将它们定位为"绝对"以阻止它们堆叠.这就是问题所在.自从我将它们设置为绝对值之后,我使用的每个方法都将包含div放在中心位置.
部分问题是我没有为绘画设置任何宽度,因为我希望它们动态调整自己的大小以填充用户屏幕的90%.
我发现了数百种用于集中绝对内容的方法,并且相信我可能需要缩小包含div的内容.但是我还没有取得任何成功.
HTML的
<div id="viewer_div">
<img src="" id="first" />
<img id="second" class="hidden"/>
</div>
样式表
#viewer_div {
width:1264px;
}
img {
height:90%;
display:block;
margin-left: auto;
margin-right:auto;
}
上面给出了我想要的效果,但是不允许我将图像置于绝对位置.任何人都可以建议一种中心图像的方法,但也允许我淡化一个在另一个上面？
推荐指数
解决办法
查看次数
在Samsung Android浏览器上启用真正的固定定位
自2.2以来,Android浏览器支持固定定位,至少在某些情况下,例如关闭缩放时.我有一个没有JS的简单HTML文件,但我试过的三部三星手机的固定定位是完全错误的.不是真正的固定定位,标题滚动出视图,然后在滚动完成后弹回原位.
对于我测试过的任何配置,Android SDK仿真器都不会发生这种情况(2.2,2.3,2.3 x86,4.0.4).在三星手机上的应用程序中使用WebView时也不会发生这种情况:在这些情况下,定位按预期工作.
有没有办法让三星Android"股票"浏览器使用真正的固定定位？
我测试过:1.三星Galaxy 551,Android 2.2 2.三星Galaxy S,Android 2.3 3.三星Galaxy S II,Android 2.3
示例代码:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height">
<style>
h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
p { margin-top: 36px; }
</style>
</head>
<body>
<h1>Header</h1>
<p>Long text goes here</p>
</body>
</html>
预期的行为是灰色标题填充屏幕的顶部,无论你滚动多少,都会保持不变.在三星Android浏览器上,它似乎滚动出视图,然后在滚动完成后重新弹回到位,好像使用Javascript模拟固定定位,但事实并非如此.
编辑 根据评论和"答案"判断,似乎我不清楚我需要什么.我正在寻找一个元标记或css规则/黑客或javascript切换,关闭三星的破碎固定位置,并打开Android浏览器的工作固定位置.我不是在寻找一个Javascript解决方案,它将破坏的固定定位添加到没有任何支持的浏览器中; 三星固定定位已经做到了,它只是看起来很愚蠢.
推荐指数
解决办法
查看次数
HTML <div>使用CSS的自相矛盾的效果
我被困在这里.请帮忙.我想通过CSS进行以下操作.
但是当我使用CSS定位时,我得到了这个输出
第四个(绿色)层应该在第一层(蓝色)下面,这不会发生.这是我使用的代码.
HTML:
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
CSS:
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}
JSFiddle:http://jsfiddle.net/rkubs/
甚至我试图使用Z-index.但没用.帮我.提前致谢.
推荐指数
解决办法
查看次数
Internet Explorer 11中的绝对定位错误
我有一个在Google Chrome,Firefox和Opera中正确显示的页面,但在Internet Explorer 11中有错误.
这是HTML,删除了不必要的部分:
<div class="container">
<div class="page-content">
<div id="corner"></div>
... page contents here
</div>
</div>
这是CSS:
.container {
margin: 0;
min-height: 100%;
padding: 0;
}
.page-content::after {
content: "";
display: block;
height: 1px;
}
.page-content {
background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 190px 100px 150px;
max-width: 64em;
padding: 10px 120px 145px;
z-index: 2;
}
.page-content {
margin: auto;
max-width: 64em;
padding: 0 1em 1em;
}
#corner {
background-color: #ffffff; …推荐指数
解决办法
查看次数