J'ai besoin d'un pied de page qui chevauche en partie le contenu au-dessus de celui-ci. La partie qui chevauche prend toute la largeur du navigateur, où le contenu est contraint à une largeur maximale. Le site est réactif et doit être flexible.
Étant donné que les pourcentages fonctionnent de la largeur de l'élément, pas la hauteur, j'ai essayé d'ajouter une marge% négative sur le pied de page et de l'ajout du même rembourrage en% au contenu pour lui donner une pièce. Cela fonctionne, mais seulement jusqu'à ce que je frappe la largeur maximale du contenu. Une fois que la largeur maximale est touchée, le% de chevauchement sur le SVG continue de devenir plus large et que le rembourrage% du contenu reste le même (parce que sa largeur ne se développe pas). P>
Comment puis-je obtenir le pied de page de chevauchement de la zone au-dessus de cela, mais donnez le rembourrage ou l'espace du contenu, il n'est donc pas couvert par le chevauchement SVG? P>
Démo de Codepen . Les largeurs sur la démonstration ne sont pas mes largeurs réelles, elles sont juste pour une démonstration. P>
p>
<div class="header">
<div class="constrained">
<h1>Header</h1>
</div>
</div>
<div class="main-area">
<div class="page-content constrained">
<div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie fermentum metus, a congue felis venenatis id. Aliquam pulvinar mauris sed ante accumsan bibendum eu eget eros. Curabitur ipsum tortor, sollicitudin at molestie vitae, consequat
sed quam. Duis pellentesque tristique rutrum. Aenean nec lobortis lectus. Phasellus et nulla ut magna suscipit congue non id nulla. Suspendisse pellentesque eu risus a tristique. Phasellus porta id tortor a blandit. Nullam finibus dui ac mollis
rutrum. Vivamus maximus tortor id purus consequat, vitae commodo purus feugiat. In convallis, nunc et fringilla ultricies, ipsum lorem sollicitudin lorem, non luctus eros nibh egestas ex. Integer tristique scelerisque viverra. Fusce porta lectus
velit, sed consequat risus pretium quis. In id molestie dui.</p>
<p>Fusce mattis, nisi ac pulvinar cursus, massa ligula sodales est, vel bibendum tellus urna sit amet lorem. Etiam nec pulvinar ante. Vestibulum consequat scelerisque vestibulum. Nam mi enim, consequat id ultrices ut, laoreet at nisi. Proin ut pharetra
dolor. Suspendisse porttitor vel diam eu condimentum. Donec a tortor a velit suscipit porttitor. Proin sit amet laoreet urna, ac lobortis lectus. In suscipit tellus eu gravida hendrerit. Pellentesque congue tempor malesuada. Maecenas et mauris
est. Ut sapien enim, vestibulum eget tincidunt sed, aliquet non nisl.</p>
<p>Phasellus rhoncus varius faucibus. Fusce laoreet eros lectus, vulputate sagittis magna varius vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec ex elit. Quisque facilisis condimentum porttitor.
Cras dignissim, odio quis lobortis viverra, sem ipsum feugiat odio, nec elementum sem ligula a elit. Praesent suscipit est ut ante malesuada convallis. Morbi sagittis at lectus vitae condimentum. Mauris iaculis commodo odio, vitae finibus dolor
efficitur in. Donec lectus mauris, cursus a viverra ac, placerat vitae magna. Donec nibh libero, auctor ac metus a, posuere efficitur purus. In interdum mauris vel pharetra cursus. Nam iaculis est tortor, sed elementum eros congue ut. Fusce vitae
ipsum rhoncus, cursus ante ac, venenatis purus. Vivamus id augue vel nisl interdum faucibus ac a massa. Nunc nibh orci, tempor hendrerit rhoncus ac, lacinia in diam.</p>
</div>
<div class="sidebar">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1309 60"><path d="M1309 45c-142.2 20.1-360.5 12.3-653.8-26.1C361.8-19.6 143.4 6.5 0 45v15h1309V45z" fill-rule="evenodd" clip-rule="evenodd" fill="#1b5d93"/></svg>
<div class="footer-container">
<div class="constrained">
<div>Some content here</div>
</div>
</div>
</div>3 Réponses :
Ajouter un décalage supérieur à votre pied de page:
.footer {
position: relative;
top:10px;
}
Le site doit être réactif, donc je ne pense pas pouvoir utiliser des pixels ici. En outre, comment cela empêche-t-il que le SVG ne soit assez large qu'il ne commence pas de cacher le contenu?
Selon ( https://stackoverflow.com/a/12034794/3684265 ) Vous pouvez donner du contenu principal Les styles ci-dessous de cette façon le rembourrage n'affecte pas la largeur: ou vous pouvez toujours mettre votre contenu dans un autre div et donner que le rembourrage: N'utilisez pas de style inline, j'ai fait cela à des fins d'illustration.
Édité ma question pour être plus clair sur ce que j'ai essayé. J'aimerais ajouter un autre rembourrage au contenu afin que le SVG ait plus large, de même que le rembourrage du contenu. Le problème est que le contenu est contraint à une largeur maximale. Une fois que cette largeur maximale est touchée, le rembourrage en% n'augmentera plus lorsque la hauteur / la largeur du SVG le permettra de chevaucher lorsque le navigateur est plus large.
Vous auriez besoin d'ajouter plus de zone grise à votre contenu principal. Gardez le CSS de la même manière, sauf ajouter du bas de remplissage.
.main-content {
padding: 20px 0;
width: 70%;
background-color: #ccc;
padding-bottom:5%;
}
Cela fonctionne bien mais ne fonctionne pas pour toutes les tailles d'écran. Le rembourrage augmentera lorsque la taille de la fenêtre augmente, vraie, mais une fois que j'ai frappé la largeur maximale du contenu, le rembourrage cessera d'augmenter pendant que le SVG deviendra plus large / plus grand et se chevauchent plus et commencez à couvrir le contenu.
Figuré une solution à mon problème. Je voulais utiliser% de rembourrage pour le rendre réactivant à tous les fenêtres, mais% largeurs sont relatives à la largeur de l'élément. Étant donné que mon contenu est défini sur une largeur maximale, le rembourrage en% ne continuera pas à augmenter, car le SVG le fait. La solution magique consiste à utiliser la largeur de fenêtre. Avec un VW pour le rembourrage (bas de remplissage: 6.87VW;) de 1,5 fois la hauteur du SVG, je peux vous assurer que le contenu n'est pas recouvert. Le rembourrage est relatif à la largeur de la fenêtre comme le SVG, pas le contenu contraint. Mise à jour dupePen avec solution