谁能帮助我优化CSS布局？
问题是：
- 左侧大小的页脚被上面的文字覆盖
- 为什么我看不到垂直滚动条？
- 右下方的文字消失在图片后面
- 右下方的文字没有到达底部
- 如何使右下方框中的字体大小与窗口成比例？
请帮忙！
此脚本中使用的图像p1.jpg可以在中找到
https://www.dropbox.com/s/u9hzlj2vz6hk229/p1.jpg?dl=0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">
.fixed_hdr_left {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 25 px;
border: 1px solid red;
}
.fixed_hdr_right {
position: fixed;
top: 0;
left: 50%;
width: 100%;
height: 25 px;
border: 1px solid black;
}
.fixed_main_left {
position: fixed;
top: 25px;
left: 0;
width: 30%;
height: 90%;
border: 2px solid magenta;
}
.fixed_main_right {
position: fixed;
top: 25px;
left: 30%;
width: 100%;
height: 50%;
max-height: 80%;
border: 2px solid yellow;
}
.fixed_main_low {
position: fixed;
font-size: 14;
font-family: Arial;
top: 60%;
left: 30%;
width: 100%;
height: 4em;
border: 2px solid green;
}
.fixed_footer_left {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 2px solid blue;
}
.fixed_footer_right {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
border: 2px solid green;
}
body {
margin-bottom: 120px;
}
</style>
<head>
<title>css layout test</title>
</head>
<body>
<div class="fixed_hdr_left"> CSS layout</div>
<div class="fixed_hdr_right"> using position; fixed;</div>
<div class="fixed_footer_left"> Copyright (c) 2015 by me and others</div>
<div class="fixed_footer_right"> Happy New Year!</div>
<div class="fixed_main_low"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </div>
<div class="fixed_main_right"> <img src="images\p1.jpg" /> </div>
<div class="fixed_main_left">
<ul>
D E S I D E R A T A
<li>Go placidly amid the noise and haste, And remember what peace there may be in silence. As far as possible without surrender be on good terms with all persons.
<li>Speak your truth quietly & clearly; and listen to others, even the dull & ignorant; they too have their story.
<li>Avoid loud & aggressive persons, they are vexations to the spirit. If you compare yourself with others, you may become vain & bitter; for always there will be greater and lesser persons than yourself. Enjoy your achievements as well as your plans.
<li>Keep interested in your own career, however humble; it is a real possession in the changing future of time. Exercise caution in your business affairs; for the world is full of trickery. But let this not blind you to what virtue there is; many persons strive for high ideals; and everywhere life is full of heroism.
<li>Be yourself. Especially, do not feign affection. Neither be cynical about love; for in the face of all aridity & disenchantment it is perenniall as the grass.
<li>Take kindly the counsel of the years, gracefully surrendering the things of youth. Nurture strength of spirit to shield you in sudden misfortune. But do not distress yourself with imaginings. Many fears are born of fatigue & loneliness. Beyond wholesome discipline, be gentle with yourself.
<li>You are a child of the universe, no less than the trees & the stars; you have a right to be here. And whether or not it is clear to you, no doubt the universe is unfolding as it should.
<li>Therefore be at peace with God, whatever you conceive Him to be, and whatever your labours & aspirations, in the noisy confusion of life keep peace with your soul. With all its sham, drudgery & broken dreams, it is still a beautiful world.
<li>Be cheerful. Strive to be happy.
written in 1927 by Max Ehrmann (1872-1945)
</ul>
</div>
</body>
</html>
答案 0 :(得分：0)
布局中的所有分区是否存在“固定”定位的空间原因？
可以使用“相对”定位轻松创建所需的布局（这将使布局响应）。其他选项包括使用像pure.css这样的CSS库。
这里我创建了你需要的布局。
编辑分区的高度属性。（高度和颜色只是为了显示布局）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
body{
text-align: center;
}
#topleft{
width: 69%;
height: 100px;
background-color: black;
display: inline-block;
}
#topright{
width: 30%;
height: 100px;
background-color: red;
display: inline-block;
}
#leftMiddle{
width: 30%;
height: 300px;
background-color: green;
display: inline-block;
}
#rightMiddle{
width: 69%;
height: 300px;
background-color: white;
display: inline-block;
}
#rm1{
width: 100%;
height: 150px;
background-color: yellow;
display: inline-block;
}
#rm2{
width: 100%;
height: 150px;
background-color: orange;
display: inline-block;
}
#footerLeft{
width: 80%;
height: 50px;
background-color: green;
display: inline-block;
}
#footerRight{
width: 19%;
height: 50px;
background-color: gray;
display: inline-block;
}
#footer{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
}
</style>
</head>
<body>
<div id="topleft">
</div>
<div id="topright">
</div>
<div id="leftMiddle">
</div>
<div id="rightMiddle">
<div id="rm1">
</div>
<div id="rm2">
</div>
</div>
<div id="footer">
<div id="footerLeft">
</div>
<div id="footerRight">
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
我认为你要做的事情应该是那样link to JSFiddle，我修改了你的代码，因为你是初学者我可以根据自己的经验给你一些建议
<html>
<head>
<style type="text/css">
.fixed_hdr_left {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 25 px;
border: 1px solid red;
}
.fixed_hdr_right {
position: fixed;
top: 0;
left: 50%;
width: 100%;
height: 25 px;
border: 1px solid black;
}
.fixed_main_left {
position: fixed;
top: 25px;
left: 0;
width: 30%;
height: 90%;
border: 2px solid magenta;
}
.fixed_main_right {
position: fixed;
top: 25px;
left: 30%;
width: 100%;
height: 50%;
max-height: 80%;
border: 2px solid yellow;
}
.fixed_main_low {
position: fixed;
font-size: 14;
font-family: Arial;
top: 60%;
left: 30%;
width: 100%;
height: 4em;
border: 2px solid green;
}
.fixed_footer_left {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 2px solid blue;
}
.fixed_footer_right {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
border: 2px solid green;
}
body {
margin-bottom: 120px;
}
</style>
</head>
<body>
<div>
<div class="fixed_hdr_left"> CSS layout</div>
<div class="fixed_hdr_right"> using position; fixed;</div>
</div>
<div class="main">
<div class="right">
<div class="fixed_main_right"> <img src="images\p1.jpg" /> </div>
<div class="fixed_main_low"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </div>
</div>
<div class="fixed_main_left">
<ul>
D E S I D E R A T A
<li>Go placidly amid the noise and haste, And remember what peace there may be in silence. As far as possible without surrender be on good terms with all persons.
</li>
<li>Speak your truth quietly & clearly; and listen to others, even the dull & ignorant; they too have their story.
</li>
<li>Avoid loud & aggressive persons, they are vexations to the spirit. If you compare yourself with others, you may become vain & bitter; for always there will be greater and lesser persons than yourself. Enjoy your achievements as well as your plans.
</li>
<li>Keep interested in your own career, however humble; it is a real possession in the changing future of time. Exercise caution in your business affairs; for the world is full of trickery. But let this not blind you to what virtue there is; many persons strive for high ideals; and everywhere life is full of heroism.
</li>
<li>Be yourself. Especially, do not feign affection. Neither be cynical about love; for in the face of all aridity & disenchantment it is perenniall as the grass.
</li>
<li>Take kindly the counsel of the years, gracefully surrendering the things of youth. Nurture strength of spirit to shield you in sudden misfortune. But do not distress yourself with imaginings. Many fears are born of fatigue & loneliness. Beyond wholesome discipline, be gentle with yourself.
</li>
<li>You are a child of the universe, no less than the trees & the stars; you have a right to be here. And whether or not it is clear to you, no doubt the universe is unfolding as it should.
</li>
<li>Therefore be at peace with God, whatever you conceive Him to be, and whatever your labours & aspirations, in the noisy confusion of life keep peace with your soul. With all its sham, drudgery & broken dreams, it is still a beautiful world.
</li>
<li>Be cheerful. Strive to be happy.
written in 1927 by Max Ehrmann (1872-1945)
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="fixed_footer_left"> Copyright (c) 2015 by me and others</div>
<div class="fixed_footer_right"> Happy New Year!</div>
</div>
</body>
</html>