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这样的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量的所有可能的变化。