0
Прежде чем начать, я категорически заявляю, что искал ответ как здесь, так и в Google, но никаких решений для меня не работало. Я попробовал отображение: table-cell, inline-block, все типы переполнения, но ничего не работает.Сделайте контент растяжкой с боковой панелью
Моя боковая панель будет в 99% случаев быть длиннее, чем содержание. Я бы просто установил минимальную высоту, однако у меня есть 3 разных боковых панели в зависимости от того, что пользователь зарегистрировал. Один из них примерно на 4 раза больше, чем у других 2, поэтому настройка высоты не будет работать.
<div class="container">
<?php include ('sidebar.php'); ?>
<div class="content">
content
</div>
</div>
Мой CSS в настоящее время:
.container {
width: 1210px;
background: #<?php echo $contentbgcolor; ?>; /* content bg colour */
margin-left: auto;
border-bottom: 1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
margin-right: auto;
overflow: auto;
}
.content {
padding: 10px;
float:left;
}
.sidebar {
width: 250px;
overflow: auto;
position: absolute;
float:left;
padding: 10px 0px 0px 10px;
}
Оценил любую помощь.
Полный HTML пример:
<div class="container">
<div class="sidebar">
<!-- Time Sidebox -->
<div class="sidebarBoxHeader">
Metropolis Time
</div>
<div class="sidebarBox">
<div id="clock" style="text-align:center; font-weight: bold; font-size: 18px;"></div><div style="text-align:center;">Sunday 5th April</div>
</div>
<!-- End time sidebox -->
<!-- Current game sidebox -->
<div class="sidebarBoxTitle">
Current Game(s)
</div>
<div class="sidebarBox" align="center">
<div align='center'>No games currently.</div>
<div style="margin-top: 10px;"><a href="sched_sunday.php"><i class="fa fa-external-link"></i> View today's schedule</a></div>
</div>
<!-- end current game box -->
<!-- Current game sidebox -->
<div class="sidebarBoxTitle">
Staff on Duty
</div>
<div class="sidebarBox" align="center">
<div align='center'>No staff on duty.</div><div style="margin-top: 10px;"><a href="roster.php"><i class="fa fa-external-link"></i> View full staff roster</a></div>
</div>
<!-- end current game box -->
<!-- Start Links Sidebox -->
<div class="sidebarBoxTitle">
Dashboard
</div>
<div class="sidebarBox borderBottom">
<ol style="list-style: none; display: inline; -webkit-padding-start: 0px;">
<li><a href="adm_index.php"><i class="fa fa-home"></i> Admin Home</a></li>
<li><a href="adm_games.php"><i class="fa fa-gamepad"></i> Game Management</a></li>
<li style="padding: 5px 0px 5px 0px;"><b>Schedule Options</b></li>
<li><a href="adm_customize.php"><i class="fa fa-paint-brush"></i> Customize Schedule</a>
<li><a href="adm_pages.php"><i class="fa fa-pencil"></i> Edit Pages</a></li>
<li style="padding: 5px 0px 5px 0px;"><b>Event Management</b></li>
<li><a href="adm_sched_events.php"><i class="fa fa-trophy"></i> Manage Events</a>
<li><a href="adm_events_new.php"><i class="fa fa-plus-circle"></i> Add New Event</a>
<li style="padding: 5px 0px 5px 0px;"><b>Staff Management</b></li>
<li><a href="adm_staff.php"><i class="fa fa-users"></i> Staff Management</a></li>
<li><a href="adm_staff_roster.php"><i class="fa fa-calendar"></i> Roster Management</a></li>
<li><a href="adm_sponsor.php"><i class="fa fa-link"></i> Sponsor Management</a></li>
<li style="padding: 5px 0px 5px 0px;"><b>Administration</b></li>
<li><a href="admin_users.php"><i class="fa fa-users"></i> User Management</a></li>
<li><a href="admin_permissions.php"><i class="fa fa-cogs"></i> Permission Groups</a></li>
<li><a href="admin_pages.php"><i class="fa fa-sitemap"></i> Page Permissions</a></li>
<li style="padding: 5px 0px 5px 0px;"><b>Staff Links</b></li>
<li><a href="staff_games.php"><i class="fa fa-gamepad"></i> Your Sponsored Games</a></li>
<li><a href="staff_hosts.php"><i class="fa fa-users"></i> Your Sponsored Hosts (Weekly)</a></li>
<li><a href="staff_event_hosts.php?Event="><i class="fa fa-users"></i> Your Sponsored Hosts (Event)</a></li>
<li><a href="staff_roster.php"><i class="fa fa-calendar"></i> Your Staff Roster</a></li>
<li style="padding-top: 10px;"><a href="user_settings.php"><i class="fa fa-wrench"></i> Account Settings</a></li>
<li><a href="logout.php"><i class="fa fa-sign-out"></i> Log Out [ admin ]</a></li>
</ol>
</div>
<!-- End links sidebox -->
</div>
<div class="content">
<div style="padding-bottom:10px;">
<form name="form1" method="get" action="">
<select name="Event" required style="width:257px; height:25px; font-size:18px; border:1px solid #000;">
<option value="">Change Event</option>
<option value='NewEvent'>NewEvent</option><option value='oneady'>oneady</option><option value='Test'>Test</option><option value='Testing'>Testing</option></select>
<input type="submit" name="submit" class="buttonRefresh" value=" "></div>
<div class="contentBoxHeader">
Your Sponsored Hosts for event
</div>
<div class="schedBox">
<table width="100%" border="0" cellpadding="2" cellspacing="0" align="center">
<tr>
<td width="50%" class="schedHeader">Host Name</td>
<td width="50%" class="schedHeader">Prize Sets Required</td>
</tr>
<tr>
<td class="schedHeader" style="border-top: 1px solid #000;">Total Prize Sets Required:</td>
<td class="schedHeader" style="border-top: 1px solid #000;"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer">
<div class="footerTxt">
Schedule Interface Version 1.0 Beta.
</div>
</div>
Пожалуйста, напишите полный пример кода. Нам не нужно видеть PHP, однако предоставленный HTML поможет. – j08691
Вы пытались удалить 'position: absolute;'? – j08691
Если я это сделаю, он подталкивает содержимое div к нижней части боковой панели. Так что да, это работает, но не так, как мне это нужно. Lol –