我有一个包装div,它将两个div相邻.在这个容器上方,我有一个包含我标题的div.包装div必须是100%减去标题的高度.标题约为60像素.这是固定的.所以我的问题是:如何设置我的包装div的高度为100%减去60 px?
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
Run Code Online (Sandbox Code Playgroud) 我想知道如何在CSS中实现算术运算.
例如:我想并排排列两个div,每个div的宽度为50%,我想在这些div上给出边框.我想写这样的规则.
#container {
width: 50% - 1px; // I know this does not work.
}
Run Code Online (Sandbox Code Playgroud)
为什么浏览器不支持CSS中的这种算术运算?
而且,我怎样才能使这个工作?
我知道IE6-7有一个CSS后备calc().同样,我知道有一个jQuery替代方案.
但是,对于IE8,是否只有CSS回退calc()?如果是这样,它是什么?
有没有办法用CSS清除绝对定位的元素?我正在创建一个页面,我需要网站的每个部分(部分元素)绝对定位,并且我想应用一个内容低于这些元素的页脚.
试图相对定位页眉和页脚,看看是否会考虑总高度,但页脚仍被"困"在截面元素下面.有任何想法吗?
<header style="position: relative;"></header>
<div id="content" style="position: relative;">
<section id="a" style="position: absolute;"></section>
<section id="b" style="position: absolute;"></section>
<section id="c" style="position: absolute;"></section>
<section id="d" style="position: absolute;"></section>
<section id="e" style="position: absolute;"></section>
</div>
<footer style="position: relative;"></footer>
Run Code Online (Sandbox Code Playgroud) 我有一个父div和2个div.第一个儿童div是50px宽和100%高度.第二个孩子div是100%身高,我要采取宽度的其余部分(100% - 50px)我该怎么做?
这是我创建的小提琴:http://jsfiddle.net/muGty/ 基本上我希望蓝色div(右)完全占据灰色容器的其余部分.
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
Run Code Online (Sandbox Code Playgroud) 我正在尝试使用Bootstrap 3创建一个不会折叠或包装文本的Navbar .我希望文本简单地被剪切掉(或省略)而不是包裹 - 因此Navbar保持在一条线上而不会垂直扩展.(此Navbar将用于显示具有单个右对齐菜单的当前视图位置)
像这样的东西:
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-header pull-left">
<p class="navbar-text" style="overflow: hidden; white-space: nowrap;">
Trying to get this long line of text to not wrap even if too wide for the view to display. Trying to get this long line of text to not wrap even if too wide for the view to display.
</p>
</div>
<div class="navbar-header pull-right">
<p class="navbar-text">Menu</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
如图所示,我一直在愚弄CSS浮动,溢出,空白设置,似乎无法得到正确的组合.此外,我使用两个navbar-header元素来避免崩溃,但如果有更好的方法,我会对其他选项持开放态度.
谢谢您的帮助.
是什么原因导致滚动条没有被夹在这个小提琴的桌子一侧:http://jsfiddle.net/m4HB3/8/ 目前它位于最后一列的下方,意味着它占据了一些列空间和从而导致表格的对齐问题.
表标题是固定的,因为我想要一个带有固定标题的滚动表.
问题可能是表格和各列的宽度设置?
有人也可以在jsfiddle外面的脚本上发布他们的答案并直接放在浏览器上,因为我已经看到了jsifddle中有些工作但后来在浏览器的主应用程序中无法工作的示例.
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" …Run Code Online (Sandbox Code Playgroud) 基本上我有一个单页HTML应用程序,其中包含所有固定位置,我只希望一个窗格具有可滚动内容.一切都按预期工作,但我无法滚动到内部容器容器的底部.我已经尝试将所有东西都移到abs pos,我已经尝试了所有我能够找到的解决方案,但是没有骰子.这是一个小提琴(http://jsfiddle.net/yhhjL/),这里是我的标记和CSS的粗略模拟:
HTML
<header>
<p>Company</p>
</header>
<div class="fixed-row-one"></div>
<div class="fixed-row-two"></div>
<div class="fixed-stage-left">
<div class="scrollable">
<table cellpadding="0" cellspacing="0">
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr> …Run Code Online (Sandbox Code Playgroud) 我有3 div秒,其中两个位于第三个.
该div含有其他有一个百分比宽度.
第二个位于第一个内部,没有特定的宽度并且向左浮动.
第三个也在第一个内部确实具有特定的宽度并且向右浮动.
问题是如何让第二个div尽可能多的宽度?
因为它适合默认的内容.
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>
<style>
#a{
width: 80%;
}
#b{
width: ??;
float:left;
}
#c{
width: 50px;
float:right;
}
</style>
Run Code Online (Sandbox Code Playgroud) 与此问题相关.
这是一个小提琴:http://jsfiddle.net/DRbRS/
注意红色轮廓列表div如何不在绿色容器div的底部对齐.
问题在于,即使标题的高度已知,也无法提前知道列表的最终高度应该是多少.
有没有办法解决这个问题而不诉诸javascript?
我们需要的是一种风格 height: fill;
css ×10
html ×5
positioning ×2
clear ×1
css-float ×1
css-position ×1
css3 ×1
height ×1
jsfiddle ×1
spacing ×1