Question

在我开始之前，我将明确表示我已在此处和Google上搜索了答案，但没有任何解决方案对我有效。我试过显示：table-cell，inline-block，所有类型的溢出但没有任何工作。

我的侧边栏99％的时间比内容长。我只想设置一个最小高度，但我有3个不同的侧边栏，具体取决于用户登录的位置。一个比另外2个长4倍，所以设置高度不会起作用。

<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;
}

enter image description here 非常感谢任何协助。

完整的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 [&nbsp;admin&nbsp;]</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="&#xf021; "></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>

Answer 1

尝试使用bootstrap。它具有响应式设计，您只需使用它设置div宽度即可。下载here。

Answer 2

移除侧栏appears to resolve the issue上的position:absolute。

使用侧边栏扩展内容

2 个答案: