61,112
社区成员
发帖
与我相关
我的任务
分享请教浏览器窗口变小，div内容不全的问题
我在学习div布局
从w3school找了一个范例，改了一下
要实现的目标，是中间的灰色main区域，在显示不完内容的时候，自己带个滚动条
浏览器窗口足够大的时候，这段代码没问题
但是，如果我把浏览器调整的比较小的时候，中间区域显示的文字，无法显示完全
div滚动条的比例没有随着窗口的大小改变而改变
请教一下各位大神，如何实现改变窗口大小，div里面滚动条也能看完全部内容呢？
谢谢
从w3school找了一个范例，改了一下
<!DOCTYPE html>
<html>
<head>
<style>
.header {
background-color:black;
color:white;
text-align:center;
padding:5px;
height: 80px;
/*position: absolute;
width: 100%;*/
}
.menu {
position:absolute;
/*line-height:100%;*/
background:yellow;
/*height:300px;*/
width:100px;
/* float:left;*/
padding:5px;
height: auto;
bottom:32px;
float: left;
top:95px;
}
.main {
background: darkgrey;
position:absolute;
left:110px;
/*width:100%;*/
float:left;
padding:10px;
overflow:auto;
height: auto;
top:95px;
bottom:32px;
height: auto;
right:10px;
width:1500px;
overflow-x:auto;
overflow-y:auto;
white-space:nowrap;
min-width: 1500px;
}
.footer {
background-color:black;
color:white;
clear:both;
text-align:center;
/* padding:5px 10px 3px 10px;*/
height: 30px;
position: absolute;
bottom: 2px;
left:5px;
right:5px;
/* width: 100%;*/
}
</style>
</head>
<body>
<div class="header">
<h1>City Gallery</h1>
</div>
<div class="menu">
London<br>
Paris<br>
Tokyo<br>
</div>
<div class="main">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,London is the capital city of England. It is the most populous city in the United Kingdom,London is the capital city of England. It is the most populous city in the United Kingdom
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div class="footer">
Copyright test.com
</div>
</body>
</html>
要实现的目标，是中间的灰色main区域，在显示不完内容的时候，自己带个滚动条
浏览器窗口足够大的时候，这段代码没问题
但是，如果我把浏览器调整的比较小的时候，中间区域显示的文字，无法显示完全
div滚动条的比例没有随着窗口的大小改变而改变
请教一下各位大神，如何实现改变窗口大小，div里面滚动条也能看完全部内容呢？
谢谢
...全文
请发表友善的回复…
发表回复
NoExceptionOut 2019-01-25
- 打赏
- 举报
感谢大神~~~
天际的海浪 2019-01-24
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.header {
background-color:black;
color:white;
text-align:center;
padding:5px;
height: 80px;
}
.menu {
position:absolute;
background:yellow;
width:100px;
padding:5px;
height: auto;
bottom:30px;
top:90px;
}
.main {
background: darkgrey;
position:absolute;
left:110px;
top:90px;
right:0px;
bottom:30px;
padding:10px;
width:auto;
height:auto;
overflow:auto;
white-space:nowrap;
}
.footer {
background-color:black;
color:white;
clear:both;
text-align:center;
/* padding:5px 10px 3px 10px;*/
height: 30px;
position: absolute;
bottom: 0px;
left:0px;
right:0px;
/* width: 100%;*/
}
</style>
</head>
<body>
<div class="header">
<h1>City Gallery</h1>
</div>
<div class="menu">
London<br>
Paris<br>
Tokyo<br>
</div>
<div class="main">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,London is the capital city of England. It is the most populous city in the United Kingdom,London is the capital city of England. It is the most populous city in the United Kingdom
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div class="footer">
Copyright test.com
</div>
</body>
</html>
