标签: css-float
将 div 内容拉伸到页面底部的固定位置页脚
我的页面由4个div组成：顶部是标题，中间是菜单div和内容div，底部是页脚div。
页脚应固定在屏幕底部。我希望内容 div 将从页眉 div 拉伸到页脚 div。如果我使用
position: absolute;
top: 80px;
bottom: 30px;
然后内容被拉伸到页脚，但之后内容不会向右拉伸。请检查下面的代码。我希望红色的内容从绿色垂直延伸到黄色，从蓝色水平延伸到屏幕的右边缘。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:insertAttribute name="title" ignore="true" /></title>
<style>
html,body{
margin:0;
padding:0;
height:100%;
}
#javanus_header{
height: 80px;
background:#AAF054;
}
#javanus_footer{
position:absolute;
bottom:0;
width:100%;
height:30px;/* Height of the footer */
background: yellow;
}
#javanus_menu{
float: left;
position: absolute;
top: 80px;
height:200px;
width: 200px;
background: blue;
}
#javanus_content{
height: 300px;
margin-left: 200px;
background: red;
top:100px;
bottom:50px;
background-image:url(img/assist.png);
background-repeat: no-repeat;
background-position:center;
}
</style>
</head>
<body>
<div id="javanus_main"> …2
推荐指数
推荐指数
1
解决办法
解决办法
4246
查看次数
查看次数
CSS：如何在一行中设置多个 div，宽度为 100%？
类似的问题在这里，但我的 div 根本没有固定大小。我需要遵循结构：
<div style="float:left;"></div>
<div style="float:left;"></div> <!-- this div should be what's left after the first and third divs -->
<div style="float:right;"></div>
我试图overflow:hidden;为第二个 div设置 ，但它没有帮助。
2
推荐指数
推荐指数
1
解决办法
解决办法
5376
查看次数
查看次数
中心jquery滑块与CSS
我的页面上有一个jquery滑块,当页面足够宽以适应它但是与窗口的左边缘对齐时会居中,当窗口较小时会移动.下面是我的CSS - 我错过了什么吗？
#billboardWrapper {height:600px;width:100%;margin:-170px 0 0 0px; position:relative; overflow:hidden; /*border-width: 0 20px 20px 20px; border-style:solid; border-color: {{settings.billboard_color}}; /* can't use border shorthand. IE9 has a rendering bug, see more notes in the ie8.css file */ }
#billboard {height:600px;width:1000px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}
#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }
.slide {height:600px;width:1000px;display:none; }
.slide img {height:600px; width:100%; background-position: 50% 0pt;
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:50px;} …2
推荐指数
推荐指数
1
解决办法
解决办法
3366
查看次数
查看次数
当我不使用溢出时浮动div不显示背景颜色？
HTML:
<div id="wrapper">
<div id="content">
<div id="slider"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</div>
CSS:
#wrapper
{
background:blue;
width:990px;
margin:0 auto;
}
#content
{
width:990px;
height:auto;
}
#slider
{
width:990px;
/* slider jquery */
height:auto;
}
#left
{
float:left;
width:490px;
}
#right
{
float:right;
width:490px;
}
现场演示:Tinkerbin
但在左右div蓝色不显示,
如果我给overflow:hidden到wrapper那么它的做工精细.是否有必要给overflow浮动div的父母？
为什么？
2
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
固定元素对齐始终贴在屏幕底部
我有一个固定元素，它是一个带有一些链接的小菜单，可以在页面上跟随您。
我正在使用 Squarespace 并使用链接制作一个新的小部件。在 CSS 中，我放置了以下代码：
#moduleContent18520661 {
position:fixed !important;
margin: auto;
top:700px;
left:400px;
cursor:hand;
background:#efefef;
border:1px solid #ffcc00;
width:480px;
z-index:100;
}
只有当我在我的电脑上对齐它时，它才能完美运行。当我看着我的笔记本电脑时，它太低了。
无论屏幕大小如何，如何将元素固定在屏幕底部？
2
推荐指数
推荐指数
1
解决办法
解决办法
5117
查看次数
查看次数
自动换行不适用于浮动文本
假设我有这个.
<div>
<div id="lala">
lalalala
</div>
</div>
CSS:
#lala
{
float:left;
word-wrap:break-word;
}
如果里面的文字#lala很大,它会是这样的.
| |
| |
| lalalalalalalalalalalalalala | lalalalalala <-- these won't be show.
| |
| |
如果我删除float:left;这将是结果.
| |
| |
| lalalalalalalalalalalalalala |
| lalalalalala |
| |
如何在使用float时获得第二个结果？
2
推荐指数
推荐指数
1
解决办法
解决办法
6180
查看次数
查看次数
在rtl CSS中浮动
现在我在css中设置了
.one-half{
width: 305px;
margin-right: 30px;
float: right;
}
.feat-cat .last-col{
margin-right: 0;
}
.feat-cat{
overflow: hidden;
margin-bottom: 30px;
direction: rtl;
}
当我这样做
（.feat-cat .last-col）消失了
我该怎么做呢？
这是我在其上工作的网站 http://hossamyehia.com/wordpress/
2
推荐指数
推荐指数
1
解决办法
解决办法
1738
查看次数
查看次数
如何使用CSS将元素定位在页面的左上角？
我需要在页面的左上角(顶部和左侧= 0)放置div id ="wrapper",就像id ="test"div一样.你能指出我的代码有什么问题吗？
为了您的愿景:http: //jsfiddle.net/Q9fzX/
<div id="wrapper">
<div class="content">
<ul>
<li class="focus">0</li>
<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>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
</ul>
</div>
</div>
<div id="navigator">
<div id="up" class="btn">UP</div>
<div id="down" class="btn">DOWN</div>
<div id="left" class="btn">LEFT</div>
<div id="right" class="btn">RIGHT</div>
<div id="pageinfo" class="pageinfo">Page 1 of tot 4</div>
</div> …2
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
CSS全宽减去边距左边div,20px同一行右边div
我试图让第一个div孩子100%在可用空间减去20px之后使用,然后使用第二个div孩子使用20px并与第一个孩子在同一条线上div.
<div style="width: 10%;">
<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>
<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>
</div>
这应该能够用CSS一级(这意味着没有position跛脚)完成,虽然我知道我错过了什么.此外anchors,两个div元素中都必须使用100%的可用宽度,因此这里有一个技巧float可以让它以某种方式运行......
2
推荐指数
推荐指数
1
解决办法
解决办法
8436
查看次数
查看次数
CSS:为什么这两个div(或span)元素不会彼此相邻
在下面的代码中,我需要div元素#ldiv并且#rdiv彼此相邻放置.
所以我使用CSS float属性.我查了一下这个答案,我想我正在关注它,但是div仍然不会彼此相邻.第二行div显示在下一行.
然后我认为这div是一个块级元素,所以我替换了divby span元素.但这也没有帮助.
<div style="padding:25px; width:400px;">
<div style="background-color:#bf5b5b;">
<span>Yes</span>
<span>No</span></div>
<div id="option_one_div">
<div id="ldiv" style="float:left; background-color:#74d4dd; width:150px;">
<label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
<label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
</div>
<div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
<span>Label of first group of Radio Buttons radio buttons.</span>
</div>
</div>
</div>
2
推荐指数
推荐指数
1
解决办法
解决办法
1084
查看次数
查看次数