CSS 布局：文字覆盖页脚、文字隐藏在图片后面等

CSS layout: text overwriting footer, text hidden behind image, etc

谁能帮我优化这个CSS布局？
问题是：
-左边尺寸的页脚被上面的文字覆盖
- 为什么我看不到垂直滚动条？
- 右下角文字消失在图片后面
- 右下角的文字没有到达底部
- 如何让右下角的字体大小与window成正比？

请帮忙！

此脚本中使用的图像 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>

"fixed" 定位用于布局中的所有分区是否有任何空间原因？
可以使用 "relative" 定位轻松创建所需的布局（这也会使布局响应）。其他选项包括使用 css 库，如 pure.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>

我想你要做的应该是这样的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>
  • 我知道固定属性看起来很熟悉，但更喜欢使用 float 或更高级的 CSS
  • 尝试尽可能自然地组织您的元素，例如，您的页脚是页面中声明的第一件事，因为它应该是最后一件事
  • 不要忘记关闭标签（许多
  • 没有
    • 来关闭它），许多 HTML 标签必须关闭以包裹您提供的信息，除了一些自闭标签，如