HTML

Question

我是 html 和 CSS 的新手，经过一些工作后我终于创建了一个布局，它将由菜单（绿色部分）和一些文本内容（黄色部分）组成。但不幸的是，我无法放置任何内容，我希望它是。我不知道我做错了什么。我为名为 obsah 的内容创建了 div，但我无法将其放入 panelcontent...有人可以给我建议吗？

body {
 text-align: center;
  background-image: url(pattern_background_by_keyshabc-d6r3ots.jpg);
}

header {
background-color: black;
 height: 80px;
 width: 100%;}


#wrapper{
margin-left: 10%;
margin-right: 10%;
width: 80%;
height: 100px;}

#panelcontent {
   float: left;
 height: 100%;
 background-color: yellow;
 width: 100%;
 
}
#panelmenu {
 float: left;
 width: 15%;
 height: 100%;
 background-color: lime;
 margin-left:auto;
 margin-right:auto;


}

#footer {
 float: left;
 height: 20px;
 width: 100%;
 background-color: red;  
}

#obsah {
 position: relative;
 left: 20%; 
 width: 50%;
 
}

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
  <header></header>
  <div id="wrapper">
  <div id="panelcontent">
  <div id="panelmenu">
  <nav></nav>
  <div id="obsah">
  <article> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. In dapibus augue non sapien. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Aliquam in lorem sit amet leo accumsan lacinia. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Mauris tincidunt sem sed arcu. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Fusce tellus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Praesent vitae arcu tempor neque lacinia pretium. Sed ac dolor sit amet purus malesuada congue. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. In convallis. Mauris metus. Praesent id justo in neque elementum ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis nibh at felis congue commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

In enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Pellentesque sapien. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Mauris elementum mauris vitae tortor. Praesent in mauris eu tortor porttitor accumsan. Nullam eget nisl. Mauris elementum mauris vitae tortor. Integer tempor. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. In convallis.</article>
  </div>
  </div>
  </div>
  <div id="footer">
  <footer></footer>
  </div>
  </div>
  

  
    <!-- page content -->
  </body>
</html>

Answer 1

好的，这是您想要的 fiddle 布局：https://jsfiddle.net/mkarajohn/opfhzm0k/1/

我将 #obsah 元素移动到与 #panelmenu 相同的级别，然后更改了以下 CSS

#panelcontent {
  height: 100%;
  background-color: yellow;
  width: 100%;
  /** Added `position: relative` to `#panelcontent` in order **/
  /** to be able to position the `#panelmenu` absolute later **/
  position: relative;
}

#panelmenu {
  width: 15%;
  background-color: lime;

  /** Here we position this element absolutely **/
  /** and we make it to have the full height of its parent by applying **/
  /** top: 0 and bottom:0 **/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

#obsah {
  position: relative;
  /** left a left margin that is equal to the width of #panelmenu **/
  margin-left: 15%;
  padding: 0 1rem;
}

HTML - 相对定位，放置内容

HTML - Relative positioning, placing content

css

positioning