CSS 两列全宽答案

【问题标题】：CSS two column full widthCSS 两列全宽
【发布时间】：2014-03-21 23:25:37
【问题描述】：

所以我有一个网站，它有一个页眉、一个页脚和两个主要内容列。

左栏用于导航。右边的是地图。我希望两者都填充浏览器的宽度。我似乎面临着不同分辨率和不同浏览器的问题。地图总是移动到页脚下方，或者在右侧留下一个空白区域。

我的链接：http://www.trashvigil.com/nsdf/www/index1.php

这是我的代码：

    #map{
    float:left;
    height:572px;
    width:79.88%;
            border-right: 2px solid #000;
            border-bottom: 3px solid #000;
    }

            #leftnav
    {
    float:left;
    width:250px;
    height: 572px;  
            border-right: 3px solid #000;
            border-bottom: 3px solid #000;
             }

#map 是地图容器。 #Leftnav 是导航。

谢谢，

考希克

【问题讨论】：

请提供代码。不要指望人们会费心在您的来源中四处寻找。
能否贴出相关的HTML和CSS
你可能用的是百分比，只需清除右列的浮点数并将其放在HTML代码的左侧，检查这个问题：stackoverflow.com/questions/5195836/…

标签： css html width

【解决方案1】：

你需要这样的东西：

#map {
    margin-left:250px;    
    height:572px;
}
#leftnav {
    float:left;
    width:250px;
    height: 572px;  
}

想法是浮动leftnav，然后为地图设置一个左边距，等于leftnav的宽度。

你可以在这里看到它：http://dabblet.com/gist/2767788

【讨论】：

嘿，这行得通。但是应该指定右列的宽度对吗？在 Safari 上，宽度减半！我现在没有给它任何宽度。
不，您不应该指定地图的宽度。它应该一直向右延伸。
我刚刚在 Safari 中查看了我的示例，它看起来不错。
我遵循了您提到的相同格式。它修复了 Chrome、Firefox 和 IE 上的问题。 Safari 搞砸了。

【解决方案2】：

#nav {
position:absolute; 
left:0px; width:250px;
height:375px; top:50px; /* height of your top bar*/
}

#map{
margin-left:250px;
height:572px;
}

【讨论】：

【解决方案3】：

这样的东西应该是你需要的。

<style>
#main
{
    width: 900px;
    overflow: hidden;
}

#leftnav
{
    float: left;
}

#map
{
    float: right;
}
</style>

<div id="header">
</div>

<div id="main">
    <div id="leftnav">
    </div>

    <div id="map">
    </div>
</div>

<div id="footer">
</div>

【讨论】：

【解决方案4】：

这样写：

#map{
    overflow:hidden;
    height:572px;
    border-right: 2px solid #000;
    border-bottom: 3px solid #000;
    }

#leftnav{
    float:left;
    width:250px;
    height: 572px;  
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    }

【讨论】：