Martin P.: DIV mit Rahmen ist immer größer als 100%

Beitrag lesen

Hallo,

vermutlich suche ich nach den falschen Stichworten, ich finde zwar vereinzelt Leute mit dem gleichen Problem - aber keine Lösung.

Ich habe ein DIV über die volle Höhe und die volle Breite. Das funktioniert wunderbar. Setze ich jetzt aber den "border" des Div's, wird dieser Border auf die 100% der Höhe und Breite aufaddiert.

---

[source]test[/source]

<html>
<head>
<title>Menütest</title>

<style type="text/css">
  html, body {
    margin:0px;
    padding:0px;
    height: 100%;
  }

div {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: 10px solid black;
  }
</style>

</head>
<body>
<div>Hello World!</div>
</html>

---

In diesen Beispiel sind also Breite und Höhe jeweils 100% + 10px + 10px.

Zum Hintergrund: Was ich bauen möchte, ist ein Menü in einem iframe. Das Menü soll den gesamten Platz des iframes verwenden und einen Rahmen um diesen gesamten Platz haben.

Wie kann ich vorgehen, damit der Rahmen innerhalb dieser 100% liegt? Benutze ich mit <div> das falsche Element? Mit <ul> z.B. tritt das Problem aber auch auf. Und <table> möchte ich eignetlich nicht mehr verwenden - dort klappt es als einziges.