大家好,今天小编来为大家解答以下的问题，关于谷歌浏览器无法弹出div，谷歌浏览器无法弹出下载窗口这个很多人还不知道，现在让我们一起来看看吧！

本文目录

1. css控制div的高度与浏览器的高度相适应
2. css+div 网页充满整个浏览器窗口
3. 如何控制div+css适应不同的浏览器
4. 如何显示超出浏览器的div浏览器超出屏幕

一、css控制div的高度与浏览器的高度相适应

1、一、首先创建或打开我们的web项目并创建一个新的html文件和css文

2、二、HTML页面代码如图所示。定义一个div并给出一个id属性。

3、三、使用宽度百分比后，将高度值设置为零，使用padding属性的top或者bottom（可以使用任何百分比），并使用背景色作为测试。

4、四、浏览器运行后，效果如下。如果放大或缩小，宽度和高度将相应更改。

5、五、此方法是使用表达式设置高度。

二、css+div 网页充满整个浏览器窗口

1、第一步，创建或打开Web项目，新建html文件以及CSS文件，见下图，转到下面的步骤。

2、第二步，执行完上面的操作之后，图中显示了HTML页面代码，定义div并给出id属性等级，见下图，转到下面的步骤。

3、第三步，执行完上面的操作之后，将“height”值设置为零，使用“padding”属性的“top”或“bottom”，同时运用背景色来进行测试，见下图，转到下面的步骤。

4、第四步，执行完上面的操作之后，效果如下，如果进行放大或进行缩小，则宽度和高度将进行相应的更改，见下图。这样，就解决了这个问题了。

三、如何控制div+css适应不同的浏览器

1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了

<meta http-equiv="x-ua-compatible" content="ie=7"/>

2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如

margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;

margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px

3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果，6 e" Z+ e%|8 G#|

4.很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!important又会把IE7做的不兼容，很头疼，在想，有没有什么方法只对FF下进行操做，我用过这个方法，感觉得是百试不爽，就是在属性前面加符号如：*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下(注意有符号的属性和没符号的属性的顺序)

height:100px;/*FF下显示100的高*/

+height:120px;/*IE678下显示120高*/

5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;如下<div style="float:left;height:100px; width:500px;">

<div style="clear:both;">

<div style="height:100px; width=300px">

6.再就是居中问题，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：1.一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2.就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。-

7.扩展：如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，用兼容的方法（注意顺序，可以好好理解一下）。7 L& t- o7 k- a1 I

background:red;/*FF里显示的红色*/

+background:blue!important;/*IE7下面显示的蓝色*/

+background:green;/*IE6下面显示的绿色*/

在这里，我想说一下，虽然兼容给你带来很多郁闷，让人心烦，但同时，在你做多了后，你会发现，兼容有时候会满足你很多不好达到的效果，就像最后一个，要做那种效果，不用兼容的方法，那你就JS去吧，JS还得想想FF和IE下的不同，当然，JS的兼容，我也不会，我没去研究过。以后的事，先把CSS+DIV学熟再说。

多做，做练，始终把盒子模型放在心中，才会熟练，才会运用自如，才会在做的时候，自然而然就知道哪里会有兼容问题，直接在测试前就解决掉那些最常见的兼容问题。

四、如何显示超出浏览器的div浏览器超出屏幕

2.html中有一个div和一个按钮。该按钮用于触发div高度的改变。

3.按钮事件功能如图所示。我们先用jquery的width方法获取div的当前宽度。

4.然后计算div的高度。假设高度应该设置为宽度的60%，我们将x0.6。

5.方法最后使用jquery的css方法设置其高度。

6.运行页面，查看当前div的宽度和高度。

7.单击按钮后，可以看到div的高度现在是宽度的0.6倍。

1、打开dw，新建一个html页面，进入html页面编辑。

2、在代码的body中间编写一个p层。

3、将这个新建好的html页面跟编写好的p利用快捷键“ctrl+s”另保存到知道的目录下。

4、点击dw的文件按钮，在弹出的下拉框中，选择“新建”。

5、在新建的窗口中，找到“css”这一栏，点击“css”新建一个css样式。

6、写样式用".pingmu{}"开始写，给它固定宽高，再添加背景色，让p自适应宽高，超过部分显示滚动条。

7、将这个css样式保存到同级目录下，如ceshi.html在c盘，css样式也保存在c盘。

8、保存好样式后，双击这个ceshi.html页面，用浏览器打开后看到100像素宽高的黑块。

javascriptscreen对象获取屏幕宽高如alert(screen.height)br>availHeight属性

窗口可以使用的屏幕高度，单位像素br>availWidth属性

窗口可以使用的屏幕宽度，单位像素br>colorDepth属性

用户浏览器表示的颜色位数，通常为32位(每像素的位数)br>pixelDepth属性

用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持)br>height属性

屏幕的高度，单位像素br>width属性

屏幕的宽度，单位像素br>br>p设置定位,宽度高度设为屏幕一般半即可，至于居中的话可以绝对定位

CSS文字大于DIV宽度时出现滚动条？

容器{overflow-x:auto;white-space:nowrap;}(兼容IE6、IE7、FF)在这里只用overflow是不够的，因为当文字长度超出容器宽度时浏览器会自己将文字换行，横向的滚动条并不会出现(除非是连接的英文字母并且字母之间没有空格)。

在这里必须加上white-space:nowrap;(nowrap:强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。)

1、打开vscode，创建一个测试页面，在测试页面中，添加一个宽度=300px的p，同时添加p的红色边框。此处设置固定宽度和边框，是为了更好的演示换行与不换行。

2、在p标签的内部，添加一些测试的文字，这些文字可以随便添加，仅仅只是演示而已。文字不要太少，最少要占据两行的空间。

3、在浏览器中打开测试页面，可以看到默认p内部的文字就自动换行了。因此，在没有设置强制不换行的情况下，让其自动换行，不需要额外的设置。

4、如果想要p内部的文字强制不换行，使用下面这个css样式即可。white-space:nowrap;。

5、在浏览器中，再次打开测试页面可以看到，p内部的文字强制没有换行了，而且占用的宽度已经超过了p预设的宽度了。

6、上面的效果，文字虽然强制没有换行了。只不过还是不太好看，如果想要让文字在p的宽度内强制不换行，超出的内容使用滚动条，就再加上一个样式。

7、在浏览器中再次打开测试页面，就能看到文字没有超过p预设的宽度了，也没有换行，p宽度显示不够的文字，自动有了滚动条。

OK，本文到此结束，希望对大家有所帮助。