UL strecken, um das gesamte DIV zu füllen

Question

Es gibt einen ähnlichen Beitrag: Horizontale ul an Breite des div anpassen

Aber meine ist ein wenig kompliziert, da ich das obige Beispiel ausprobiert habe, aber gescheitert bin.

CSS:

body{
  font-size:0.85em;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}

#nav, #nav ul{
  margin:0;
  padding:0;
  list-style-type:none;
  list-style-position:outside;
  position:relative;
  line-height:1.5em;
  display: table;
  width: 100%;
}

#nav a{
  display:block;
  padding:10px 15px 10px 15px;
  border:1px solid #fff;
  color:#fff;
  text-align: center;
  margin:0;
  text-decoration:none;
  background: #C34328;
  border-top:1px solid #EF593B;
  -moz-box-shadow:0px 3px 4px #591E12 inset;
  -webkit-box-shadow:0px 3px 4px #591E12 inset;
  -box-shadow:0px 3px 4px #591E12 inset;
}

#nav a:hover{
  background-color:#fff;
  color:#333;
}

#nav li{
  float:left;
  position:relative;
}

#nav ul {
  position:absolute;
  display:none;
  width:12em;
  top:3.2em;
}

#nav li ul a{
  width:12em;
  height:auto;
  float:left;
}

#nav ul ul{
  top:auto;
}

#nav li ul ul {
  left:12em;
  margin:0px 0 0 10px;
}

HTML:

<div style="width: 980px; border: 1px black solid;">
  <ul id="nav">
    <li><a href="#">Find a Doctor</a></li>
    <li><a href="#">Why Interfaith</a></li>
    <li><a href="#">For Patients & Visitors</a>
      <ul>
        <li><a href="#">3.1 jQuery</a></li>
        <li><a href="#">3.2 Mootools</a></li>
        <li><a href="#">3.3 Prototype</a></li>
      </ul>
    </li>
    <li><a href="#">Medical Services</a>
      <ul>
        <li><a href="#">Behavioral Health</a></li>
        <li><a href="#">Clinical Laboratory</a></li>
        <li><a href="#">Dentistry</a></li>
      </ul>
    </li>
  </ul>
</div>

Kann mir jemand sagen, wo ich den Code bearbeiten muss, um ihn zu vervollständigen?

Merci

Answer 1

Versuchen Sie, die gewünschte Breite auf width:inherit !

Answer 2

Versuchen Sie es doch mal mit em anstelle von Prozent, oder verwenden Sie ein JavaScript wie:

document.getElementById('ul').style.width=(document.body.clientWidth-10)*9;

Sie müssen die Werte von 10 und 0,9 entsprechend anpassen.

Oder etwas wie:

var viewportwidth;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth;
}
 var boxwidth = parseInt(viewportwidth)*0.57;
var boxwidth2 = parseInt(boxwidth)+6;
window.onload=function(){

document.getElementById('ul').style.width = boxwidth2 + 'px';
}

Ich habe diesen Code jedoch nicht getestet.

Answer 3

Sie brauchen dafür kein Javascript zu verwenden.

Hier ist ein sehr vereinfachtes Beispiel: http://jsfiddle.net/hghzL/

<div style="width: 600px; border: 1px black solid; background: red">
  <ul id="nav">
    <li><a href="#">Find a Doctor</a></li>
    <li><a href="#">Why Interfaith</a></li>
    <li><a href="#">For Patients & Visitors</a></li>
    <li><a href="#">Medical Services</a></li>
  </ul>
</div>

*{
  margin: 0;
  padding: 0; 
}

html{
  background: #111;    
  font-size: 12px;
  font-family: Verdana, sans-serif;
}

#nav{
  list-style-type:none;
  overflow: hidden;
  background: #222;
}

#nav a{
  color: #fff; 
  display: block;
  padding: 10px;
  text-decoration:none;
  background: #444;
}

#nav a:hover{
  background-color:#fff;
  color:#333;
}

#nav li{
  float:left;
}

Und das ohne all die ausgefallenen Untermenüs.

Ein bisschen mehr erweiterte Version ( Quelle ).