Jak uzyskać rozszerzenie nav, aby było rozwinięte w dół lub wysokość była taka sama, jak jego div jednostki nadrzędnej (kontener)?Jak zdobyć element div, aby zmienić jego wysokość, aby zmieścił się w pojemniku?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title></title> 
<style type="text/css"> 
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */ 
#container { 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
    overflow: auto; 
    width: 800px; 
} 
#nav { 
    width: 19%; 
    border: 1px solid green; 
    float:left; 
} 
#content { 
    width: 79%; 
    border: 1px solid red; 
    float:right; 
} 
</style> 


<div id=container> 
    <div id=nav> 
     <ul> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
     </ul> 
    </div> 
    <div id=content> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p> 
    </div> 
</div> 

</body> 
</html>

2009-08-04 ParoX

prosty sposób

Można to osiągnąć przy ustawieniu zarówno top i bottom atrybuty nav do 0 i position: absolute. Ustaw kontener na position: relative.

See how this is done

Na dole tego artykułu znajduje się link do Deana Edwardsa IE7 i IE8 (js) biblioteki, które należy uwzględnić dla użytkowników IE6. Jest to biblioteka JS, która w rzeczywistości powoduje, że IE6 zachowuje się jak IE7 (lub 8), gdy ją dodasz. Słodkie! ... oczywiście są w nim błędy, ale przynajmniej wiesz, jak sobie z nimi radzić.

Dean Edwards' IE7 and 8 JS libraries

nowoczesny sposób (schematu flexbox)

IE11 + i wszystkie nowoczesne przeglądarki obsługują schematu flexbox.

.container { 
    display: flex; 
    flex-direction: column; 
} 

.child { 
    flex-grow: 1; 
}

Źródło

2009-08-05 00:52:15 kmiyashiro

Musisz również ustawić 'position: absolute' na samej nawigacji. Jest to wspomniane w artykule, ale pomyślałem, że dobrze byłoby tu o tym wspomnieć. – Muhd

@Muhd zaktualizowana odpowiedź – kmiyashiro

Prawdopodobnie będą chcieli korzystać z następującą deklarację:

height: 100%;

To będzie wyznaczać wysokość div do 100% jego wysokości pojemników, które pozwolą wypełnić div nadrzędnej .

Źródło

2009-08-04 23:08:54

Użytkownik może określić wysokość pojemnika, a następnie ustawić wysokość nawigatora na 100%.

Edytuj: szybko się obejrzało i wygląda na to, że właściwość wysokości odnosi się do wysokości rodziców, więc rzeczywiście musisz ustawić wysokość kontenera.

NB: Ustawienie wysokości elementu bryły na 100% powoduje skalowanie go do wysokości okna przeglądarki. Wszelkie treści, które goeds na jednej stronie nie będą miały taką samą tła itp

Źródło

2009-08-04 23:09:06 schubySteve

To działa, ale nie chciałem stałej wysokości pojemnika. ; – ParoX

W odniesieniu do NB: would not min-height: 100%; pomóż temu – ParoX

@Brian, możesz spróbować. – schubySteve

Niestety, nie ma na to sposobu, aby to osiągnąć. Blok rozszerzy się tylko na wysokość swojego kontenera, jeśli nie jest pływający. Płynne bloki są traktowane poza przepływem dokumentów.

Jednym ze sposobów na wykonanie poniższych czynności bez użycia JavaScript jest technika o nazwie Faux-Columns.

Zasadniczo wiąże się to z nałożeniem background-image na elementy macierzyste elementów pływających, co pozwala sądzić, że oba elementy mają tę samą wysokość.

Więcej informacji na stronie:

A List Apart: Articles: Faux Columns

Źródło

2009-08-05 00:54:07

To jest to, co mam teraz, próbuję zlikwidować to. – ParoX

Kolejny prosty sposób istnieje. Nie musisz kodować więcej w CSS.Wystarczy, że włączysz skrypt java i wprowadzisz div "id" wewnątrz skryptu, aby uzyskać równą wysokość kolumn, abyś mógł dopasować wysokość do kontenera. Działa w głównych przeglądarkach.

Kod źródłowy:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title></title> 
<style type="text/css"> 
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */ 
#container { 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
    overflow: auto; 
    width: 800px;  
} 
#nav { 
    width: 19%; 
    border: 1px solid green; 
    float:left; 
} 
#content { 
    width: 79%; 
    border: 1px solid red; 
    float:right; 
} 
</style> 

<script language="javascript"> 
var ddequalcolumns=new Object() 
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists: 
ddequalcolumns.columnswatch=["nav", "content"] 

ddequalcolumns.setHeights=function(reset){ 
var tallest=0 
var resetit=(typeof reset=="string")? true : false 
for (var i=0; i<this.columnswatch.length; i++){ 
if (document.getElementById(this.columnswatch[i])!=null){ 
if (resetit) 
document.getElementById(this.columnswatch[i]).style.height="auto" 
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest) 
tallest=document.getElementById(this.columnswatch[i]).offsetHeight 
} 
} 
if (tallest>0){ 
for (var i=0; i<this.columnswatch.length; i++){ 
if (document.getElementById(this.columnswatch[i])!=null) 
document.getElementById(this.columnswatch[i]).style.height=tallest+"px" 
} 
} 
} 

ddequalcolumns.resetHeights=function(){ 
this.setHeights("reset") 
} 

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) 
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype 
if (target.addEventListener) 
target.addEventListener(tasktype, functionref, false) 
else if (target.attachEvent) 
target.attachEvent(tasktype, functionref) 
} 

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load") 
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize") 


</script> 

<div id=container> 
    <div id=nav> 
     <ul> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
       <li>Menu</li> 
     </ul> 
    </div> 
    <div id=content> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum consequat ligula vitae posuere. Mauris dolor quam, consequat vel condimentum eget, aliquet sit amet sem. Nulla in lectus ac felis ultrices dignissim quis ac orci. Nam non tellus eget metus sollicitudin venenatis sit amet at dui. Quisque malesuada feugiat tellus, at semper eros mollis sed. In luctus tellus in magna condimentum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel dui est. Aliquam vitae condimentum dui. Praesent vel mi at odio blandit pellentesque. Proin felis massa, vestibulum a hendrerit ut, imperdiet in nulla. Sed aliquam, dolor id congue porttitor, mauris turpis congue felis, vel luctus ligula libero in arcu. Pellentesque egestas blandit turpis ac aliquet. Sed sit amet orci non turpis feugiat euismod. In elementum tristique tortor ac semper.</p> 
    </div> 
</div> 

</body> 
</html>

Możesz dołączyć dowolny żaden z div w tym skrypcie.

ddequalcolumns.columnswatch = [ "nawigacji", "zawartość"]

modyfikować w powyższej linii jej mało.

Spróbuj tego.

Źródło

2009-08-06 15:44:46

Miałem ten sam problem, rozwiązałem go za pomocą niektórych javascript.

<script type="text/javascript"> 
var theHeight = $("#PrimaryContent").height() + 100; 
$('#SecondaryContent').height(theHeight); 
</script>

Źródło

2012-07-10 08:19:11

-2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#top, #bottom { 
    height: 100px; 
    width: 100%; 
    position: relative; 
} 
#container { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 
#container .left { 
    height: 550px; 
    width: 55%; 
    position: relative; 
    float: left; 
    background-color: #3399FF; 
} 
#container .right { 
    height: 100%; 
    position: absolute; 
    right: 0; 
    left: 55%; 
    bottom: 0px; 
    top: 0px; 
    background-color: #3366CC; 
} 
</style> 
</head> 

<body> 
<div id="top"></div> 
<div id="container"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 
<div id="bottom"></div> 
</body> 
</html>

Źródło

2013-08-16 12:28:21 Lasithds

-1 Twój kod może idealnie odpowiedzieć na to pytanie, ale jestem zbyt leniwy, aby skopiować go do miejsca, w którym mogę go zobaczyć. Tak więc, [skrzypce] (http://www.jsfiddle.com/) swoją odpowiedź i opisz, co robi. – bishop

Jeżeli trik z użyciem position:absolute, position:relative i top/left/bottom/right: 0px nie jest odpowiednie dla danej sytuacji, można spróbować:

#nav { 
    height: inherit; 
}

To działało na jednej z naszych stron, choć nie jestem pewien dokładnie, jakie inne warunki były potrzebne, aby odnieść sukces!

Źródło

2013-11-25 16:28:17 joeytwiddle

Jak zdobyć element div, aby zmienić jego wysokość, aby zmieścił się w pojemniku?

Odpowiedz

prosty sposób

nowoczesny sposób (schematu flexbox)

Powiązane problemy