CSS两列全宽 [英] CSS two column full width

问题描述

所以我有一个网站，有一个标题，一个页脚和两个主要内容列之间。

So I have a website which has a header, a footer and two main content columns inbetween.

左栏用于导航。右边的是地图。我想要两个都填满浏览器的宽度。我似乎面临着不同的分辨率和不同的浏览器的问题。

The left column is for navigation. The right one is a map. I want both to fill the width of the browser. I seem to be facing problems with different resolutions and different browsers. The map always displaces to below the footer or it leaves a white space on the right.

我的链接： 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 是导航。

#map is the map container. #Leftnav is navigation.

谢谢您，

Kaushik

推荐答案

您需要这样的：

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

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

The idea is to float the leftnav and then set a left margin for the map that is equal to the width of the leftnav.

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

You can see it live here: http://dabblet.com/gist/2767788

这篇关于CSS两列全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！