Tag: CSS

CSS:高度填充其余的div?

我不知道这是可能的简单的CSS或如果我必须使用JavaScript的呢? 我在我的网站上有一个侧边栏。 一个简单的div#sidbar它通常约1024px高,但由于它的内容高度dynamic变化。 所以让我们想象下面的情况: <div id="sidebar"> <div class="widget"></div> //has a height of 100px <div class="widget"></div> //has a height of 100px <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar </div> 我希望div#rest填写其余的边栏,直到它到达div#边栏的底部。 这是纯粹的CSS可能吗?

CSS – 使内容出现在固定的DIV元素下面

我的目的是在页面顶部创build一个菜单,即使用户滚动,页面顶部仍然保留(就像Gmail最近的function,这个function有用户向下滚动的常用button,以便它们可以执行对消息的操作,而不必滚动到页面的顶部)。 我也想设置下面的菜单下面的内容 – 目前,它出现在它的后面。 我的目标是这样的: +________________________+ | MENU | <— Fixed menu – stays at top even when scrolling. +¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ | CONTENT BEGINS | | HERE | | | | | | | | | | | | | +¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ <— Bottom of page. 我希望在顶部有一个永不停息的菜单,即使用户向下滚动,它也停留在页面顶部。 当用户位于页面顶部时,我也希望主要内容从菜单下方开始,但是当用户向下滚动时,菜单是否超出内容顶部并不重要。 概要: 我希望在页面顶部有一个固定的位置菜单,在滚动时跟在用户的后面。 当用户位于页面顶部时,内容必须出现在菜单下方。 当用户向下滚动时,菜单可能与内容重叠。 有人可以请解释如何做到这一点? 谢谢。 更新: CSS代码: #floatingMenu{ […]

样式inputtypes文件?

是否可以设置types文件的input元素,而不必担心浏览器的兼容性? 在我的情况下,我需要实现一个背景图像和圆形边框(1px),如果可能的话,button也应该自定义。

如何实现谷歌类似于build议的input字段?

我目前正在开发自己的自动完成/build议脚本,并希望Google在其主网站上实现类似的效果。 当用户开始input(例如stack )时,下面的下拉列表中将显示4条build议,但是…同时位于顶部的显示将以灰色显示在“input”字段中: 怎样才能把另一个stringinput不同的风格? 这是一个<span>input与更大的z-index值? 当我点击string的灰色部分时,input字段没有得到焦点,所以我相信有一些东西必须被覆盖。 如果实际上这是坐在input上的一个<span> (或另一个<div> ),那么他们如何知道string( stack )的第一部分结束以及在哪里定位(宽度) overflow字(在这种情况下)。 有谁知道如何达到这个效果?

当ios 7虚拟键盘存在时,Div元素不会停留在底部

我有一个div元素的问题,坚持我的web应用程序的底部,当按下一个文本框后出现ios 7虚拟键盘。 我有这个div元素: …. <div id="footer" style="text-align:center"> <div id="idName"><img alt="SomeName" src="images/logo.png" /></div> </div> </form> </body> 它使用这种风格 #footer{ color:#CCC; height: 48px; position:fixed; z-index:5; bottom:0px; width:100%; padding-left:2px; padding-right:2px; padding:0; border-top:1px solid #444; background:#222; /* Old browsers */ background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */ […]

使用CSS转换旋转表格标题文本

这看起来应该是可能的,如下所示: .verticalText { /* IE-only DX filter */ writing-mode: tb-rl; filter: flipv fliph; /* Safari/Chrome function */ -webkit-transform: rotate(270deg); /* works in latest FX builds */ -moz-transform: rotate(270deg); } 这在IE中工作。 它在Safari,Chrome和FX中以奇怪的方式出错 – 单元格的大小在文本旋转之前计算! 这里是一个演示: http : //jsfiddle.net/HSKws/ 我使用dynamic图像作为解决方法,虽然这也有其问题 。 我很高兴,作为一个倒退,但似乎应该有一种方法来使这个CSS的工作 – 几乎在那里。 任何人都知道一种方法,使转换后的细胞适应内容?

为什么伪元素上的filter渐变在IE8中不起作用?

我想创build&#x8FD9;样的button: 在现代浏览器中,使用插入框阴影和filter创build效果。 对于IE8 – select伪元素。 对于IE7 – 我使用包装在条件注释中的特殊标签。 演示: ( http://jsfiddle.net/8M5Tt/68/ ) /** * Button w/o images */ html { font-size: 62.5%; } body { font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif; } /* layout */ .btn { display: inline-block; height: 28px; border-width: 1px; border-style: solid; width: 170px; box-sizing: content-box; overflow: hidden; position: relative; z-index: […]

hover后如何在鼠标上反转animation

所以,有可能在鼠标上有反转animation,例如: .class{ transform: rotate(0deg); } .class:hover{ transform: rotate(360deg); } 但是,当使用@keyframesanimation,我无法得到它的工作,例如: .class{ animation-name: out; animation-duration:2s; } .class:hover{ animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframe in{ to {transform: rotate(360deg);} } @keyframe out{ to {transform: rotate(0deg);} } 什么是最佳的解决scheme,知道我需要迭代和animation本身? http://jsfiddle.net/khalednabil/eWzBm/

如何在CSS中旋转文本

如何在CSS中旋转文本以获得以下输出… 喜 编辑: 感谢您的快速build议。 我已经在jsfidle中添加了我的示例代码: http://jsfiddle.net/koolkabin/yawYM/ 我面临的问题是,当我们旋转文本,然后它打破了alignment和立场……那么是什么原因造成的,我怎样才能pipe理他们?

什么是从正常stream程中获取元素的CSS属性?

什么是从正常stream程中获取元素的CSS属性? 这些属性将是浮动的,位置:绝对等 这个问题涉及正常stream量的所有可能的变化。