Div plus large que le navigateur sans défilement du navigateur

Je travaille sur une mise en page où le contenu div principal aura un de 970px. Derrière cette div, je veux un div avec des dimensions 1200x600px (il contiendra un objet flash) positionné comme ceci:Div plus large que le navigateur sans défilement du navigateur

width:1200px; 
height:600px; 
position:absolute; 
left:50%; 
margin-left:-600px;

Le problème est lorsque le navigateur est dimensionné pour une largeur inférieure à 1200px il obtenir la barre de défilement horizontale . Je peux arranger ça par:

body {overflow-x:hidden;}

Mais je ne veux qu'elle ait la barre de défilement horizontale quand il se taille à moins de 970 pixels en largeur. Fondamentalement, j'essaie d'obtenir le div 1200px à se comporter plus comme une image d'arrière-plan CSS. Des idées?

Source

2010-09-04 tybro0103

Cela fonctionne sans JavaScript:

<body style="margin:0"> 
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;"> 
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;"> 
    --flash object-- 
</div> 
</div> 
<div style="position:absolute;width:100%;z-index:100;"> 
--main content-- 
</div> 
</body>

MISE À JOUR: Nous avons dû apporter des modifications pour adapter votre positionnement div absolu (div parent doit être absolument positionné aussi)

Source

2010-09-04 21:07:39 userx

Cela met les boîtes au bon endroit en deux dimensions, mais il met le contenu derrière l'arrière-plan. – danorton

@danorton utilise la propriété CSS z-index pour définir votre corps principal en haut. Je vais mettre à jour mon code ci-dessus. – userx

Superbe travail! Bon travail! – spez86

vous pouvez utiliser l'événement onresize et, lorsqu'il est inférieur à 970px, changer overflow-x en auto ou faire défiler.

si vous utilisez jQuery, rechercher la méthode .resize()

Source

2010-09-04 20:59:16

Si vous allez faire cela, assurez-vous que vous utilisez dobouncing: http://benalman.com/code/projects/jquery-dotimeout/examples/debouncing/ (Vérifiez le 2ème exemple) –

debuncing semble très utile, Que Ben Alman a écrit des plugins sympas. J'ai récemment utilisé ses plugins haschange et BBQ. –

Une solution est entièrement possible avec CSS. Les éléments clés sont position: fixe et z-index: -1. Les deux DIV dans cet exemple sont des frères et soeurs, mais il y a d'autres possibilités. Cette solution fonctionne avec les dernières versions de Chrome, FireFox, Safari, Opera et MSIE.

Cela ne fonctionne pas avec MSIE6, qui n'a pas bonne application de la z-index style, mais il existe une solution compatible MSIE6 (qui montre la barre de défilement à 1200px) si vous êtes en mesure de réorganiser les choses et ajoutez un wrapper DIV.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html title="html"> 
    <head> 
    <style type="text/css"> 
    #content 
    { 
     background: #ffffe8; 
     height: 500px; 
     margin: 0 auto; 
     width: 970px; 
    } 
    #background 
    { 
     background: #ffe8e8; 
     height: 600px; 
     left: 50%; 
     margin-left: -600px; 
     position: fixed; 
     top: 0; 
     width: 1200px; 
     z-index: -1; 
    } 
    </style> 
    </head> 
    <body title="body"> 
    <div id="content" title="#content"> 
     <p>content</p> 
    </div> 
    <div id="background" title="#background"> 
     <p>background</p> 
    </div> 
    </body> 
</html>

Source

2010-09-04 22:02:30 danorton

J'utiliserais une requête de média CSS3.

body{overflow:hidden;} 

@media only screen and (max-width: 970px) { 
    body{overflow:visible;} 
}

Commencez par définir le débordement sur le corps à masquer afin qu'il ne défile pas. Ensuite, lorsque l'écran est inférieur à 970px, réglez-le sur visible afin qu'il défile.

Source

2013-10-02 14:44:49 user2428593

Div plus large que le navigateur sans défilement du navigateur

Répondre

Questions connexes