相关疑难解决方法(0)
我可以阻止100%宽度文本框扩展到容器之外吗？
让我说我有一个文本框,我想填补整行.我会给它一个这样的风格:
input.wide {display:block; width: 100%}
这会导致问题,因为宽度基于文本框的内容.文本框默认具有边距,边框和填充,这使得100%宽度的文本框大于其容器.
例如,在右边:
有没有办法让文本框填充其容器的宽度而不扩展到它之外？
这是一些示例HTML来显示我的意思:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
如果运行此操作,您可以通过查看"普通"文本框看到"宽"文本框伸出容器."普通"文本框浮动到容器的实际边缘.我正在尝试使"宽"文本框填充其容器,而不像"普通"文本框那样扩展到边缘之外.
推荐指数
解决办法
查看次数
CSS形而上学:为什么页面垂直对齐如此困难？
相对于页面,CSS中的水平对齐很容易 - margin:0 auto大部分时间都可以获得,而text-align:center对于其他一些情况则是如此.
我对大师的问题不是如何垂直对齐,但为什么这么难？为什么不存在margin:auto 0？我的意思是,从编程的角度来看.
从理论上讲,似乎相同的算法适用于两种类型的居中.
推荐指数
解决办法
查看次数
CSS 100%高度布局
我知道这是一个常见问题,我查找了一些解决方案,但找不到我想要的内容.
我想转换此为表布局.
注意:页眉和页脚必须设置为固定高度(以像素为单位)(50px即可).
我遇到的主要问题是我无法在中间获得那个"大盒子",就像它完成表格一样.有一些解决方案适用于可变长度的内容(文本,图像),但我希望这个盒子看起来像一个盒子 - 边框,圆角和所有.
推荐指数
解决办法
查看次数
包括宽度和高度的余量
我希望框宽度和高度默认包含所有内容,填充,边框宽度和边距.有没有办法做到这一点？特别是,我希望能够指定width: 100%包括所有内容的内容.
推荐指数
解决办法
查看次数
100%宽度减去边距和填充
我一直在寻找,但我找不到适用于我自己的问题的解决方案.
我正在移动网站上工作,需要输入框为100%宽度的屏幕.但我有padding-left: 16px,margin: 5px这使得盒子走出屏幕,所以我必须向右滚动才能看到盒子的末端.如何使盒子100%减去填充和边距？
推荐指数
解决办法
查看次数
Div边缘 - 底部有一定比例的高度？
例如,我有一个高度为的div 100px(我不知道高度,但假设我做了).我想设置margin-bottom为百分比,所以25%将25px假设先前的高度.但是,百分比似乎是文档,而不是元素:
<div style="height:100px;margin-bottom:100%"></div>
边距应该是100px但不是,它是页面高度的100%.
元素只是一行没有背景的文本,因此height:150%理论上使用也可以.
推荐指数
解决办法
查看次数
引导.div其父元素的100%高度
使用bootstrap我在创建div 100%height的父元素时遇到了困难.
我有.row-fluiddiv和两个.spandiv.首先.span9有更多的内容,然后第二个.span3有导航和空白空间.我想用颜色填充那个空白区域.我希望在.span9达到内容的地方尽可能地延伸.
推荐指数
解决办法
查看次数
身高不足100%页面高度
我无法想出这个.我有一组简单的div,包括标题,侧边栏和内容区域.标题是全宽,侧面和内容向左浮动.
我需要侧边栏(用于背景)来填充100%的页面高度,但是当我检查chrome中的元素时,<body>实际上是在页面底部之前很久结束,这似乎限制了我的侧边栏的高度.
什么阻止<body>填写整页？
?<body>
<div id="head">
</div>
<div id="sidebar">
<div>
<div id="menu">
<ul>
<li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a>
</li>
<li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a>
<ul class="submenu" style="display: none;">
<li><a href="/users">Manage users</a></li>
<li><a href="/users/add.php">Add a user</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a>
<ul class="submenu" style="display: none;">
<li><a href="/client_orgs">Manage clients</a></li>
<li><a href="/client_orgs/add.php" class="admin">Add a client</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a>
<ul class="submenu" style="display: none;">
<li><a href="/projects">Manage projects</a></li>
<li><a href="/projects/add.php" class="admin">Create a project</a></li>
<li></li>
<li><a href="/projects/submitted.php" …推荐指数
解决办法
查看次数
溢出(滚动) - 100%容器高度
我想要一个浮动的div(称之为'侧边栏')显示100%的容器高度,并在必要时滚动.
如果侧边栏的内容(高度)超过容器的内容(高度),则应滚动.
内容是动态的,固定的高度是不可能的.
我想尽可能避免使用表格,但如果这是唯一的解决方案,我会使用它们.
我不想使用javascript.
如果表,正文和单元格都被赋予100%高度,则可以使用表格实现此效果,并且在一个单元格中,可以设置高度为100%且溢出:滚动的div.这适用于webkit(Safari和Chrome)以及IE,但在壁虎(Fx)中失败 - '失败'意味着内容比容器更多的div将扩展容器(再次仅在Fx中).如果使用带有display:table/table-row/table-cell的div,则在webkit中使用相同的想法,但在Fx和IE中都失败.如果它有用,我可以提供一个这样的样本.
使用高度为100%的iframe也可以实现这种效果,这似乎适用于所有现代浏览器,但我希望尽可能避免不必要的iframe.
我必须认为,因为可以使用上面的"黑客",所以可能使用无桌面,无框架的CSS,但超出了我的理解水平.
有什么建议？tyia.
推荐指数
解决办法
查看次数
带有填充和边距以及100%宽度的HTML CSS Box？
我有一个#box宽度为100%的盒子,高度:100%,填充:5px,边距:5px; 边界:5px;
我需要在HTML5布局中正确显示它.
现在我有:
但我需要在身体区域适合阻滞.
码:
<!DOCTYPE html>
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
}
#box {
width: 100%;
height: 100%;
border: 5px solid red;
padding: 15px;
margin: 20px;
}
</style>
<body>
<div id="box">
Text will be here
</div>
</body>
推荐指数
解决办法
查看次数