Tag: CSS

使div 100%的浏览器窗口的高度

我有一个两列的布局 – 左边的div和右边的div 。 正确的div有一个灰色的background-color ,我需要它根据用户的浏览器窗口的高度垂直扩大。 现在, background-color在该div的最后一部分内容结束。 我试过height:100% , min-height:100%; 等等

使用CSS更改HTML5input的占位符颜色

Chrome支持input[type=text]元素上的占位符属性 (其他人可能也会这样做)。 但是下面的CSS并没有蹲在占位符的值上: input[placeholder], [placeholder], *[placeholder] { color: red !important; } <input type="text" placeholder="Value"> Value将仍然保持grey而不是red 。 有没有办法改变占位符文本的颜色?

为什么百分比高度不能在我的div上工作?

我有两个div的高度为90%,但显示不同。 我试图把一个外部的div,但没有帮助。 另外,在FF,Chrome,Opera和Safari上也是如此。 有人可以解释为什么我有这个问题吗? 以下是我的代码: <div style="height: 90%"> <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;"> <tabset> <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active" disabled="tabs[0].disabled"> </tab> <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active" disabled="tabs[2].disabled"> </tab> </tabset> </div> <div id="leaflet_map" ng-controller="iPortMapJobController"> <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet> </div> </div>

如何将CSS应用到iframe?

我有一个简单的页面,有一些iframe部分(显示RSS链接)。 如何将主页面上的相同CSS格式应用到iframe中显示的页面?

我如何过渡高度:0; 到高度:auto; 使用CSS?

我正在尝试使用CSS转换向下滑动<ul> 。 <ul>从height: 0;开始height: 0; 。 hover时,高度设置为height:auto; 。 但是,这导致它只是出现, 而不是过渡, 如果我从height: 40px; 到height: auto; ,那么它将滑动到height: 0; ,然后突然跳到正确的高度。 我还能怎么做,而不使用JavaScript? #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent0:hover #child0 { height: auto; } #child40 { height: 40px; overflow: hidden; […]

让div填充剩余的屏幕空间的高度

我目前正在开发一个Web应用程序,我希望内容能够填充整个屏幕的高度。 该页面有一个标题,其中包含一个标志和帐户信息。 这可能是一个任意的高度。 我想要内容div来填充页面的其余部分到底部。 我有一个标题div和一个内容div 。 目前,我正在使用如下布局的表格: CSS和HTML #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } <table id="page"> <tr> <td id="tdheader"> <div id="header">…</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">…</div> </td> </tr> </table> 页面的整个高度被填满,不需要滚动。 对于content div内的任何内容,设置top: 0; 会把它放在标题的正下方。 有时候,内容将是一个真正的表格,其高度设置为100%。 将header放入content将不会允许这个工作。 有没有办法达到同样的效果,而不使用table […]

使用PHP将HTML + CSS转换为PDF?

好的,我现在正在用这个砖头撞墙。 我有一个HTML(而不是XHTML)文档,在Firefox 3和IE 7中呈现良好。它使用相当基本的CSS来设置样式,并在HTML中呈现良好。 我现在把它转换成PDF格式。 我努力了: DOMPDF :它有很大的表格问题。 我分解了我的大嵌套表,它有帮助(之前它只消耗128M的内存然后死亡 – 这是我在php.ini内存的限制),但它使表的一个完整的混乱,似乎并没有得到图片。 这些表格只是基本的东西,有些边框样式可以在不同的点上添加一些线条; HTML2PDF和HTML2PS :我其实有更好的运气。 它呈现了一些图像(所有的图像是谷歌图表url)和表格格式更好,但它似乎有一些复杂性的问题,我还没有想出来,并不断地死于未知的node_type()错误。 不知道该从哪里走 和 Htmldoc :这对于基本的HTML似乎工作得很好,但几乎不支持CSS,所以你必须用HTML做所有事情(我还没有意识到它仍然是2001年在Htmldoc-land中),所以对我来说是没用的。 我尝试了一个名为Html2Pdf Pilot的Windows应用程序,实际上做了一个相当不错的工作,但我需要的东西至less在Linux上运行,理想情况下通过Web服务器上的PHP按需运行。 我真的不能相信我这个卡住了。 我错过了什么吗?

如何在不使用JavaScript的情况下使用CSS设置<select>下拉菜单?

是否有一个CSS样式的<select>下拉菜单? 我需要尽可能人性地devise一个<select>表单,而不需要任何JavaScript。 我可以在CSS中使用哪些属性? 此代码需要与所有主stream浏览器兼容: Internet Explorer 6,7和8 火狐 苹果浏览器 我知道我可以使用JavaScript: 例如 。 我不是在谈论简单的造型。 我想知道,我们只能用CSS做什么最好的。 我发现堆栈溢出类似的问题 。 而这个在Doctype.com上。

CSS三angular形如何工作?

在CSS技巧中有很多不同的CSS形状- CSS的形状,我特别困惑于一个三angular形: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> 如何和为什么它的工作?

Flexbox代码可用于除Safari之外的所有浏览器。 为什么?

带有列表标签的网格列,我需要按照每3列按正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度。 这是我的例子: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> 我想要像这样转换输出: 1 4 7 10 2 5 8 11 3 6 9 12 这是我迄今为止所尝试过的,并且在其他所有浏览器上都能正常工作,但是与Safari浏览器不兼容,除非添加以下内容: display: -webkit-flex; 。 <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: […]