【求教】请问，如何用css3实现div自适应高度？_html/css

집

웹 프론트엔드

HTML 튜토리얼

【求教】请问，如何用css3实现div自适应高度？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

页面的结构非常简单

<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>

其中，header和footer是根据某种条件动态选择引入的。换言之，header和footer的高度可能会变化。
遇到的问题是，当content中的内容很少的时候，div的高度会比较小，那么在比较大的屏幕上footer就会出现在很高的位置。
这个太难看了。

请问，怎么写css能够使得当屏幕比较大的时候，footer也出现在屏幕的底部，就像baidu首页那样的效果。

回复讨论(解决方案)

可以将footer {
position:fix;
bottom: 0
}
将footer一直贴在底部

谢谢您。

不过，这种办法的话，
一则好像会出现竖向滚动条，
二则，一旦content中内容多了……，
如果我没体会错，您是这个意思：

<html>	<head>		<title>自适应高度测试</title>	</head>	<style>		html body {			height: 100%;		}		.header {			height: 100px;		}		.footer {			position: fixed;			bottom: 0;		}	</style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html>

我原本是这么搞的:

<html>	<head>		<title>自适应高度测试</title>	</head>	<style>		html body {			height: 100%;		}		.header {			height: 100px;		}		.footer {			height: 100px;		}		.content {			height: 100%;		}	</style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html>

结果，出现竖向滚动条了，footer直接被conter挤出画面了。

求指点。

<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>

display:box;
box-flex:

.content{ height:auto; min-height:600px;}

<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>

感谢您的指点。
这里面存在另外一个问题，就是header和footer是动态引入的，可能会有不同的高度。

display:box;
box-flex:

谢谢提醒。

<html>	<head>		<title>自适应高度测试</title>	</head>	<style>		html body {			height: 100%;		}		.wrap {			height: 100%;			display: -webkit-box;			display: -moz-box;			display: box;			-webkit-box-orient: vertical;			-moz-box-orient: vertical;			box-orient: vertical;		}		.header {			height: 100px;		}		.footer {			height: 100px;		}		.content {			/*height: 100%;*/			-webkit-box-flex: 1;			-moz-box-flex: 1;			box-flex: 1;		}	</style><body>	<div class="wrap">		<div class="header">This is header</div>		<div class="content">This is content</div>		<div class="footer">This is footer</div>	</div></body></html>

两个小问题：
一个问题是请您帮忙看一下代码哪还有问题，我用三个浏览器都看到出现了垂直滚动条。
另外一个问题就是这个属性好像还没有被正式支持吧？
真的不喜欢用每个浏览器的私有属性定义写CSS。

.content{ height:auto; min-height:600px;}

请问，这个600px，是假设当前最小的显示器为“1024*768”吗？
还是由何而来，使用600这个设置呢。

我在1920*1200的显示器上看页面，footer还是浮在页面中间了。

.content{ height:auto; min-height:600px;}

请问，这个600px，是假设当前最小的显示器为“1024*768”吗？
还是由何而来，使用600这个设置呢。

我在1920*1200的显示器上看页面，footer还是浮在页面中间了。
那就把这个600设大点喽，要想自适应各种分辨率，得用到js了，网上找一找吧。

display:box;
box-flex:

啊哈，8楼所说滚动条的问题解决了。
呵呵，真是不好意思，太久不弄CSS，特以的糊涂了。

那么，另外的问题就是，这个属性，IE能支持吗？

.content{ height:auto; min-height:600px;}

请问，这个600px，是假设当前最小的显示器为“1024*768”吗？
还是由何而来，使用600这个设置呢。

我在1920*1200的显示器上看页面，footer还是浮在页面中间了。
那就把这个600设大点喽，要想自适应各种分辨率，得用到js了，网上找一找吧。

这个倒是自己应该能写的出来，不过不想用JS来处理这个事情。
看看吧，如果没好办法，也只能JS了。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 태그와 HTML 속성의 차이점은 무엇입니까?May 14, 2025 am 12:01 AM

htmltagsdefinestructureofawebpage, whiletributesdfunctionalityanddetails.1) tags, andoutlinethecontent'splacement.2) agtributessuchassrc, class 및 styleenhancetagsbysingingimages ources, styling, and mormore, mormor, 개선.

HTML의 미래 : 진화와 트렌드May 13, 2025 am 12:01 AM

HTML의 미래는보다 의미적이고 기능적이며 모듈 식 방향으로 발전 할 것입니다. 1) 의미화로 인해 태그가 콘텐츠를보다 명확하게 설명하여 SEO 및 장벽없는 액세스를 향상시킵니다. 2) 기능화는 사용자의 요구를 충족시키기 위해 새로운 요소와 속성을 소개합니다. 3) 모듈화는 구성 요소 개발을 지원하고 코드 재사용 성을 향상시킵니다.

HTML 속성이 웹 개발에 중요한 이유는 무엇입니까?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopmentforcontrollingbehavior, 외관 및 기능. 접근성, 접근성, andseo.forexample, thesrcattributeintagspactsseo, whike whike whike whike whike whike thercattributeintagspactsseo

ALT 속성의 목적은 무엇입니까? 왜 중요한가요?May 11, 2025 am 12:01 AM

ALT 속성은 HTML에서 태그의 중요한 부분이며 이미지에 대한 대체 텍스트를 제공하는 데 사용됩니다. 1. 이미지를로드 할 수 없으면 ALT 속성의 텍스트가 표시되어 사용자 경험을 향상시킵니다. 2. 스크린 리더는 ALT 속성을 사용하여 시각 장애가있는 사용자가 그림의 내용을 이해하도록 도와줍니다. 3. 검색 엔진 인덱스 텍스트 텍스트는 웹 페이지의 SEO 순위를 향상시키기 위해 ALT 속성의 텍스트를 색인 텍스트입니다.

HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램May 09, 2025 am 12:01 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 구축하는 데 사용됩니다. 2. CSS는 웹 페이지의 모양을 아름답게하는 데 사용됩니다. 3. JavaScript는 동적 상호 작용을 달성하는 데 사용됩니다. 태그, 스타일 및 스크립트를 통해이 세 가지는 함께 현대 웹 페이지의 핵심 기능을 구축합니다.

태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까?May 08, 2025 am 12:03 AM

태그의 Lang 속성을 설정하는 것은 웹 접근성 및 SEO를 최적화하는 핵심 단계입니다. 1) 태그에 LANG 속성을 설정하십시오. 2) 다국어 컨텐츠에서는 다른 언어 부품에 대한 LANG 속성을 설정하십시오. 3) "en", "fr", "zh"와 같은 ISO639-1 표준을 준수하는 언어 코드를 사용하여 LANG 속성을 올바르게 설정하면 웹 페이지 및 검색 엔진 순위의 접근성을 향상시킬 수 있습니다.

HTML 속성의 목적은 무엇입니까?May 07, 2025 am 12:01 AM

htmlattributesearsentialforenhancingwebelements'functionalityandAmpearance.theyaddinformationTodeFineBehavior, 외관 및 간호, WebsITESITERACTIVE, RAPITIVE 및 VVESILLY -CAMENTION.ATTRIBUTESLIKESRC, HREF, 클래스, 유형 및 디스티브 트랜스포트

HTML에서 목록을 어떻게 만드나요?May 06, 2025 am 12:01 AM

ToCreateAlistInhtml, useUnorderEdListandForOrdLists : 1) forUnderedList, wrapitemSinanduseForeachitem, renderingasabulletedList.2) forOrderEdlists, useandfornumberedLists, useandfornumberedlists, useandfornumberedlists, useandfornumberedlists, withTheyPeatTributeFferentNumberingStyles.

See all articles