Empêcher le chevauchement d'un div sur un élément fixe

Je souhaite créer une page Web dont la partie fixe est en bas et, en haut, une partie qui sera remplie dynamiquement avec du contenu, cette partie dynamique doit comporter une barre de défilement Si le contenu ajouté ne correspond pas, afin de rester au-dessus de la partie fixe.Empêcher le chevauchement d'un div sur un élément fixe

style.css:

.action-box{ 
    position: fixed; 
    bottom: 15px; 
    margin-top: 10px; 
    width: 100%; 
}

index.html:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div> 
    <!-- this will be filled with content --> 
    </div> 
    <div class="action-box"> 
    <!-- this is the fixed part --> 
    </div> 
</body> 
</html>

Vous pouvez voir dans this fiddle qui se chevauchent s les deux div.

Comment est-ce que je peux faire le premier div défilement, de sorte qu'il ne glisse pas au-dessus ou au-dessous du dernier div?

Source

2012-08-12 Paul

Je propose d'utiliser le redimensionnement dynamique, en fonction de la hauteur de la fenêtre:

Voici jQuery exemple:

function adjustBlocks() { 
    var winH = $(window).height(); 
    var boxH = $('#action-box').height(); 
    $('#content').height((winH - boxH) + 'px'); 
} 

$(document).ready(adjustBlocks); 

$(window).resize(adjustBlocks);

Exemple HTML:

<div id="content"></div> 
<div id="action-box"></div>

échantillon CSS:

#content{ 
    width: 100%; 
    background: #eee; 
    overflow-y: scroll; 
} 

#action-box{ 
    width: 100%; 
    background: #ffccaa; 
}

Bien sûr, vous pouvez facilement ajouter des marges et les mentionner dans jQuery fonction de redimensionnement.

Oh, et le example on jsfiddle

Source

2012-08-12 09:23:57

En utilisant cette solution, je me suis débarrassé de la div fixe: D Merci! – Paul

@Paul Nice à l'entendre. :) –

Donnez-lui une classe css avec une hauteur fixe et overflow: scroll;

Source

2012-08-12 08:44:29

est pas là une façon sans hauteur fixe? Peut-être que sur certains écrans, il ne s'affichera pas correctement. – Paul

Vous utilisez déjà une position fixe ... Ne devrait pas être différent. –

Avec une hauteur fixe, il ne pourra pas évoluer avec la hauteur des navigateurs. –

La façon la plus simple est d'appliquer margin-bottom à la div sur le dessus qui correspond à la hauteur totale de la div fixe au fond, et vous devez donner le div au fond d'une hauteur avec une couleur de fond de sorte que l'autre div ne montre pas à travers.

.action-box{ 
    position: fixed; 
    bottom: 0px; 
    height: 20px; 
    padding-bottom: 10px; 
    width: 100%; 
    background-color: white; 
} 

.content {margin-bottom: 50px}

http://jsfiddle.net/RdGXt/151/

Source

2012-08-12 08:59:20

Ne fonctionne pas, ils vont toujours se chevaucher puisque le fond est fixe. –

@RasmusFranke Il a presque fonctionné, l'a réparé pour qu'il fonctionne. –

Empêcher le chevauchement d'un div sur un élément fixe

Répondre

Questions connexes