HTML下拉菜单为什么无线拉长,【CSS】怎么拉长一个div的高度

请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个div太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢?

我希望的效果如下

回答：

$(".divClassName").css("height",$(document).height());

这样可以定义某个div的高度跟页面大小一致，如果用js，注意以下问题:

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

子元素的div高度，按百分比设置，会根据父元素的高度自动调整。

如果还是变化太大，可以通过@media screen and (max-width:1000px) {} 这样的方法给不同范围的写不同的样式

回答：

一个就是和楼上说的一样设置一个min-height 还有一个可以适应不同大小屏幕的方法:在页面加载时用js获取当前body的高度，然后根据你的需要，设置div高度为body高度的百分之几，这样不管屏幕分辨率大小是多少，看起来比例都会是一样的。

回答：

用绝对定位即可。

.main-nav { heigth: 80px; }

.content {position: absolute; top: 90px; bottom: 0; }

回答：

min-height

回答：

可以设定一个最小高度来撑起空白区域的内容高度，如min-height:300px;，

但是min-height属性在IE6下不被支持，不过通过处理可以获得支持，代码如下

min-height:300px;

height:auto !important;

height:300px;

回答：

@screen

回答：

最小高度可以用，但是未必可以保持最好的显示效果，还是建议采用js来识别当前页面高度的方法用比例设置高度

回答：

可以试一下：min-height

回答：

楼主可以包裹这段文字加一个margin-bottom试试

回答：

给div一个min-height属性，可以使其在最大屏时，仍能保持一定高度。

回答：

内联样式表，定义一个width？

回答：

我看你使用了圆角，想来也是没有兼容性考虑了，

那就直接 calc 吧

回答：

用’padding-bottom’把底部撑下去也可以的吧

HTML下拉菜单为什么无线拉长,【CSS】怎么拉长一个div的高度相关推荐

HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
html下拉菜单会影响下一行,CSS下拉菜单导致后续内容无法撑满页面
问题描述初学CSS,打算做一个下拉菜单.目标结果是: "下拉菜单"那个显示的就是一个下拉菜单. 但是如果在CSS中把下拉菜单周围的border去掉,内容部分就无法占满整行: 问题 ...
jquery 下拉菜单 html,方便的CSS和jQuery下拉菜单解决方案
如果您正在寻找一些很酷的下拉菜单解决方案 , 那么这些要 .今天 , 我收集了一些有用的 CSS和jQuery 下拉菜单解决方案 . Creating a pure CSS dropd ...
html下拉菜单怎么浮起来,CSS悬浮下拉菜单
这是前端时间课设时写的一个简单的下拉菜单,主要就是对CSS定位和选择器的使用,下面是实现代码: CSS代码: .list-menu{ display: flex; background: #f7f7f ...
html纵向下拉菜单怎么做,HTML+CSS实现下拉菜单的实现
1.下拉列表实例代码如下: *{ margin:0; padding:0; text-decoration:none; list-style:none; } body{ text-align:cen ...
CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
.w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}
CSS下拉菜单鼠标移入菜单内容时，菜单隐藏消失的问题
问题描述在使用CSS制作下拉菜单时,鼠标在移动到下拉标题上,下拉菜单内容显示,鼠标移开时,菜单隐藏起来,但是但我们试图把鼠标移动到菜单内容上时,菜单内容也隐藏了.代码是仿照实现某网站的一个小的下拉菜 ...
下拉菜单的两种实现方式：CSS和JS
本文的下拉菜单核心是通过改变DISPLAY的值,来改变菜单的出现和隐藏. 在此简单介绍DISPLAY: display:[参数] 属性定义:设置元素如何显示. 参数:默认为inline,具体参数如下表 ...
php菜单栏样式,最常见的多个css下拉菜单样式分享
CSS下拉菜单怎么做?在浏览网页的时候我们总会看到各式各样的下拉菜单,那么这些下拉菜单是怎么实现的呢?本篇文章就来给大家分享一下常用的多个CSS下拉菜单的实现方法. CSS下拉菜单的精选文章随便打开 ...

HTML下拉菜单为什么无线拉长,【CSS】怎么拉长一个div的高度

HTML下拉菜单为什么无线拉长,【CSS】怎么拉长一个div的高度相关推荐

最新文章

热门文章