CSS两列全宽

本文介绍了CSS两列全宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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.

我的链接： www.trashvigil/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.

你可以看到它住在这里： dabblet/gist/2767788

You can see it live here: dabblet/gist/2767788