如何扩展左侧容器
我的网站有两个容器，一个侧面容器和一个主容器。主容器通常比侧容器长，具体取决于网页。在某些网页上，侧面容器比主容器短
例如
其他时候很好
我尝试过使用不同的position和margin，但我没有成功。
CSS：
#main-container {
background-color:#2e6366;
width: 610px;
padding:5px;
border-left: 3px solid #6e6c6c;
border-right: 3px solid #6e6c6c;
margin-top:-85px;
float:right;
padding-top:30px;
min-height:1205px;
}
#sidebars_container {
background-color:#2e6366;
width: 290px;
padding:5px;
border-left: 3px solid #6e6c6c;
border-right: 3px solid #6e6c6c;
margin-top:-85px;
float:left;
padding-top:30px;
min-height:1205px;
position:absolute;
}
html：
<div id="sidebox_container">
<div id="navigation"> <ul>
<!-- BEGIN logged_in -->
<li>
<a href="/">
Homepage
</a>
</li>
<li>
<a href="http://forum.pirate-zone.com">
Forum
</a>
</li>
<li>
<a href="http://game.pirate-zone.com">
Start Playing
</a>
</li>
<li>
<a href="/">
Rankings
</a>
</li>
<li>
<a href="/">
Task
</a>
</li>
<li>
<a href="/">
Game Manual
</a>
</li>
<li><a href="/">
Characters & Skills
</a>
</li>
<li>
<a href="?acc=logout">
Logout
</a>
</li>
<!-- END logged_in -->
<!-- BEGIN logged_out -->
<li>
<a href="/">
Homepage
</a>
</li>
<li>
<a href="http://forum.pirate-zone.com">
Forum
</a>
</li>
<li>
<a href="http://game.pirate-zone.com">
Start Playing
</a>
</li>
<li>
<a href="?acc=login">
Login
</a>
</li>
<li>
<a href="/?acc=register">
Register
</a>
</li>
<li>
<a href="/">
Rankings
</a>
</li>
<li>
<a href="/">
Game Manual
</a>
</li>
<li>
<a href="/">
Characters & Skills
</a>
</li>
<!-- END logged_out -->
</ul></div>
<div id="sidebox_news">News Ticker</div><div id="sidebox_news_bottom"><!-- BEGIN news --><div id="side_list"><span style="margin-top: 5px; margin-left: 10px; color:#52969a; font-size:20px; vertical-align: top; float: left; margin-right: 10px;">✘</span>
<p style="display: inline; float: left;">
<p id="username_top"><b><a href="http://wamp.pirate-zone.com/?page=news&id={ID}">{NTITLE}</a></b></p>
<p id="side_info"><b>{DATE}</b> </p>
</p>
<div class="clearfix"> </div>
</div><!-- END news --></div>
<div id="sidebox_news"> Site Poll</div><div id="sidebox_news_bottom"><!-- BEGIN poll --><div id="side_list"><span style="margin-top: 5px; margin-left: 10px; color:#52969a; font-size:20px; vertical-align: top; float: left; margin-right: 10px;">✘</span>
<p style="display: inline; float: left;">
<p id="username_top"><b><a href="http://wamp.pirate-zone.com/?page=news&id=2">New Characters</a></b></p>
<p id="side_info"><b>April 13, 2016, 5:48 AM</b> </p>
</p>
<div class="clearfix"> </div>
</div> <!-- END poll --></div>
<div id="sidebox_news"> Statistics</div><div id="sidebox_news_bottom">
<!-- BEGIN stat -->
<p id="username_top"><b>Members</b></p>
<p style="display: inline; float: left;">
Total members: {TOT}
<br/>
Latest member:<span style="color:#fff"> <u>{NNAME}</u></span>
</p>
<br/><br/>
<p id="username_top"><b>Online:</b></p>
<p style="display: inline; float: left;">
Admins online: <span style="color: #fff; font-style: normal;">{W}</span><br />
Moderators online: <span style="color: #fff; font-style: normal;">{M}</span><br />
Members online: <span style="color: #fff; font-style: normal;">{ME}</span><br />
Guests online: <span style="color: #fff; font-style: normal;">{G}</span>
</p>
<div class="clearfix"> </div>
</div>
<!-- END stat --></div>
</div> <!-- BEGIN profile -->
<div id="left-container" style="margin-top:-115px; width:720px; margin-right:-100px;"> <div id="location"><p>{SITELINK} > {AREA}</p></div> <img src="./template/luffy/images/dots.png" style="background-repeat:repeat-x; width:auto; height:12px; margin-bottom:5px;"/><img src="./template/luffy/images/dots.png" style="background-repeat:repeat-x; width:auto; margin-left:20px; height:12px; margin-bottom:5px;"/>
<div class="avatar_area" style="margin-right:10px">
<div style="margin: 15px auto 10px 15px; width: 100px; border: 2px solid #fff; border-radius: 25px; overflow: hidden; float:left">{AVATAR}</div> <span class="avatar_info" style="margin-top:10px;"> Username: <b> {PRONAME}</b>
<br/>
{RANKIMG}
<br/>
Status:<b> {STATUS}</b>
<br/>
<span style="padding:5px;"> Latest Activity: <a style=" margin-left:3px;"href="{FL}"><b>{PAGE}</b></a></span></span>
</div>
<!-- BEGIN logged_in --><div style="margin: 50px 0px 5px 10px;"><a href="?area=forum&s=mail&action=new&user={ID}"><img style="max-width:140px; margin-bottom: 10px;" src="./template/Luffy/images/pm.png" alt="" border="0"/></a><br/>{FRIEND}</div><!-- END logged_in -->
<div class="clearfix" style="height: 30;"> </div>
<div style="float: left; margin-left: 20px;">
<div class="profile_info">
<div align="center" class="profile_info_header">Statistics</div>
<div style="padding: 10px;">
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Level: <span style="color: #52969a; font-weight:bold">{LEVEL}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Rank: <span style="color: #52969a; font-weight:bold">{RANK}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Experience Points: <span style="color: #52969a;font-weight:bold">{EXP}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Ratio: <span style="color: #52969a;font-weight:bold">{WIN}-{LOSS}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Streak: <span style="color: #52969a;font-weight:bold">{STREAK}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Height Streak: <span style="color: #52969a;font-weight:bold">+{STREAK}</span></p>
</div>
</div>
</div>
<div style=" float: right; margin-right: 20px;">
<div class="profile_info">
<div align="center" class="profile_info_header">Crew information</div>
<div style="padding: 10px;">
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> <font size="+3"><span style="color: #52969a; font-weight:bold">{CREW}</span></font>{CREWAVA}</p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Level: <span style="color: #52969a;font-weight:bold">{CLVL}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Rank: <span style="color: #52969a; font-weight:bold">{CREW_RANK}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Experience Points: <span style="color: #52969a;font-weight:bold">{CEXP}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;"> Joined On: <span style="color: #52969a;font-weight:bold">{CREWDATE}</span></p>
<p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted 444;"> Ratio: <span style="color: #52969a;font-weight:bold">{CWIN}- {CLOSS}</span></p>
</div>
</div>
</div>
<div style="margin-top: 20px; margin-right: 20px; margin-left: 20px;">
<div id="gameinfo"><div class="margin"> </div> <ul id="nav">
<li class="selected" title="Ladder Games"><p style="padding: 10px; font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps;"><a href="#" style="font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps; text-decoration: none;" onclick="currenttab(0)">Ladder Games</a></p></li>
<li class="notselected" title="Quick Games" alt=""><p style="padding: 10px; font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps;"><a href="#" style="font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps; text-decoration: none;" onclick="currenttab(1)">Quick Games</a></p></li>
<li class="notselected" title="Private Battles"><p style="padding: 10px; font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps;"><a href="#" style="font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps; text-decoration: none;" onclick="currenttab(2)">Private Battles</a></p></li>
</ul></div><div id="games">
<div id="game_list" style="display: none;">
<div style="width: 560px; margin: 40px auto;">
<p style="text-align: center; font-family: Calibri, Arial, sans-serif; font-size: 20px; color: #fff; text-decoration: underline; font-variant: small-caps; margin-bottom: 10px; margin-top: 10px;">No Ladder games have been done in the last 24 hours.</p>
</div>
<div class="clearfix" style="height: 0;"> </div>
</div>
<div id="game_list" style="display: none;">
<div style="width: 560px; margin: 40px auto;">
<p style="text-align: center; font-family: Calibri, Arial, sans-serif; font-size: 20px; color: #fff; text-decoration: underline; font-variant: small-caps; margin-bottom: 10px; margin-top: 10px;">No quick games have been done in the last 24 hours.</p>
</div>
</div>
<div id="game_list" style="display: none;">
<div style="width: 560px; margin: 40px auto;">
<p style="text-align: center; font-family: Calibri, Arial, sans-serif; font-size: 20px; color: #fff; text-decoration: underline; font-variant: small-caps; margin-bottom: 10px; margin-top: 10px;">No private have been done in the last 24 hours.</p>
</div>
</div>
</div>
<div style="clear: both;"> </div>
<div class="profile_signature">
<div style="font-family: Calibri;">
<br/>{SIGNATURE}</div>
</div><div style="clear: both;"> </div></div></div> <!-- END profile -->
2 个答案:
答案 0 :(得分：0)
尝试从position的定义中删除#sidebars_container属性，并将float:right;更改为left
答案 1 :(得分：0)
检查这个小提琴链接是否有帮助。的 DEMO
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:940px;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
background-color:#3D3A40;
border:8px solid #fff;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
p {
padding-bottom:18px;
}
#main-container {
background-color:#2e6366;
width:590px;
border:3px solid #6e6c6c;
padding:10px;
/*float:right;
min-height:1205px;*/
display:table-cell;
}
#sidebars_container {
background-color:#2e6366;
width: 270px;
border:3px solid #6e6c6c;
padding:10px;
/*float:left;
min-height:1205px;*/
display:table-cell;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？