Question

刚开始使用CSS和HTML，我有点困惑。除非我包含div容器的position:fixed边框，这是容纳所有东西的主容器，否则div会卡在所有内容的顶部，并且不会自动高度来包围其中的所有内容。

这是我的HTML：

<!DOCTYPE html>
<html>

<head>

    <title></title>
    <link rel="stylesheet" href="style.css">

</head>

<body> 
<div id="container">

<div id="header">
        <header> 
            <nav>
                <ul class="nav">
                    <li class="header">Ben</li> 
                    <li class="nav"><a href="#">About me</a></li> 
                    <li class="nav"><a href="uni.html">University Units</a></li>
                    <li class="nav" style="border-right: none;"><a href="#">Soft Skills</a><!-- inline style to remove border right --></li> 
                </ul>
            </nav>
        </header><!-- closes header -->
</div><!--Closes header -->



<div id="content">
    <h1>University Units</h1> <!-- content header -->

    <article>

    <h2>Introduction to Web Design</h2>

    This unit provides an introduction to the fundamental principles and mathematics underpinning the design and construction of computer systems, including:
    <ul class="csf">
        <li>Digital Logic and Boolean Algebra: digital logic gates and circuits, Karnaugh maps, use of a digital logic circuit simulator, components of a CPU, processor model, Fetch execute cycle, hardware interrupts</li>
        <li>Assembly Language Programming: relationship between high level languages and assembler, instruction sets, registers, debugging</li>
        <li>Discrete Mathematics: matrices and vectors, matrices as linear transforms</li>
        <li>Functions: definition, properties</li>
        <li>Sets: subsets, set algebra</li>
        <li>Logic: propositions, predicates, propositional algebra, proof of simple results</li>
    </ul>

    <h2>Programming</h2>
    An introduction to the use of information systems in organisations which will show you how to develop key systems analysis techniques to be applied to information systems built on a commercial RDBMS. You will also develop essential communication skills. You will examine business activities supported by information systems including case studies and examples, e-commerce, management information, privacy. Systems analysis and design techniques: use cases, UML. Database management systems and database design: ERDs, normalisation, SQL. Communication and teamwork skills.

    <br><br>

    Details of other units continued on the <a href="uni2.htm">next page</a>


    </article>





</div><!-- Closes content -->


</div><!-- Closes container -->

</body>

</html>

和CSS（这可能是一团糟）：

 /* main */

#container{
    position: fixed; 
    width: 75%;
    height: auto;
    margin: 25px;
    border: 3px solid black;
    padding-bottom: 20px;
    padding-right: 10px;
}

#header{
    position: fixed;
    width: 75%;
    float: left;
    border-bottom: 3px solid black;
}


nav{
    float: top;
}

li.nav{
    display: inline;
    font-family: roboto;
    text-decoration:none;   
    color: black;
    border-right: 2px solid #7c7b7c;
    padding: 10px;
    padding-bottom: 0px;
}

li.header{
    display: inline;
    font-size: 200%;
    font-family: bebas;
    padding-right: 20px;
    border-right: 3px solid black;
}

header a:link{
    text-decoration: none;

    font-size: 200%;
    color: black;
}


ul.nav{
    list-style-type: none;
    text-decoration: none;
}

#content{
    float: left;
    clear: both;
    margin-left: 20px;
    margin-top: 80px;
}

#content article{
    font-family: roboto;
    padding-right: 5px;
    float: left;
}

#content a:link{
    text-decoration: none;
    font-size: 100%;
    color: blue;
}

#content a:visted{
    color:purple;
}

#content h1{
    font-family: roboto;
}

#content h2{
    font-family: roboto;
}

/* fonts */

@font-face{
    font-family: bebas;
    src: url(bebas.otf);
}

@font-face{
    font-family: roboto;
    src: url(roboto.ttf);
}

Answer 1

将容器div上的位置和标题div更改为绝对...，如下所示

/* main */

#container {
  position: absolute;
  width: 75%;
  height: auto;
  margin: 25px;
  border: 3px solid black;
  padding-bottom: 20px;
  padding-right: 10px;
}
#header {
  position: absolute;
  width: 75%;
  float: left;
  border-bottom: 3px solid black;
}
nav {
  float: top;
}
li.nav {
  display: inline;
  font-family: roboto;
  text-decoration: none;
  color: black;
  border-right: 2px solid #7c7b7c;
  padding: 10px;
  padding-bottom: 0px;
}
li.header {
  display: inline;
  font-size: 200%;
  font-family: bebas;
  padding-right: 20px;
  border-right: 3px solid black;
}
header a:link {
  text-decoration: none;
  font-size: 200%;
  color: black;
}
ul.nav {
  list-style-type: none;
  text-decoration: none;
}
#content {
  float: left;
  clear: both;
  margin-left: 20px;
  margin-top: 80px;
}
#content article {
  font-family: roboto;
  padding-right: 5px;
  float: left;
}
#content a:link {
  text-decoration: none;
  font-size: 100%;
  color: blue;
}
#content a:visted {
  color: purple;
}
#content h1 {
  font-family: roboto;
}
#content h2 {
  font-family: roboto;
}
/* fonts */

@font-face{

font-family:bebas;
 src:url(bebas.otf);

}
@font-face{

font-family:roboto;
 src:url(roboto.ttf);

}

<!DOCTYPE html>
<html>

<head>

  <title></title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div id="container">

    <div id="header">
      <header>
        <nav>
          <ul class="nav">
            <li class="header">Ben</li>
            <li class="nav"><a href="#">About me</a>
            </li>
            <li class="nav"><a href="uni.html">University Units</a>
            </li>
            <li class="nav" style="border-right: none;"><a href="#">Soft Skills</a>
              <!-- inline style to remove border right -->
            </li>
          </ul>
        </nav>
      </header>
      <!-- closes header -->
    </div>
    <!--Closes header -->



    <div id="content">
      <h1>University Units</h1> 
      <!-- content header -->

      <article>

        <h2>Introduction to Web Design</h2>
        This unit provides an introduction to the fundamental principles and mathematics underpinning the design and construction of computer systems, including:
        <ul class="csf">
          <li>Digital Logic and Boolean Algebra: digital logic gates and circuits, Karnaugh maps, use of a digital logic circuit simulator, components of a CPU, processor model, Fetch execute cycle, hardware interrupts</li>
          <li>Assembly Language Programming: relationship between high level languages and assembler, instruction sets, registers, debugging</li>
          <li>Discrete Mathematics: matrices and vectors, matrices as linear transforms</li>
          <li>Functions: definition, properties</li>
          <li>Sets: subsets, set algebra</li>
          <li>Logic: propositions, predicates, propositional algebra, proof of simple results</li>
        </ul>

        <h2>Programming</h2>
        An introduction to the use of information systems in organisations which will show you how to develop key systems analysis techniques to be applied to information systems built on a commercial RDBMS. You will also develop essential communication skills.
        You will examine business activities supported by information systems including case studies and examples, e-commerce, management information, privacy. Systems analysis and design techniques: use cases, UML. Database management systems and database
        design: ERDs, normalisation, SQL. Communication and teamwork skills.

        <br>
        <br>Details of other units continued on the <a href="uni2.htm">next page</a>


      </article>





    </div>
    <!-- Closes content -->


  </div>
  <!-- Closes container -->

</body>

</html>

Container Div没有封装内容

1 个答案: