Вопросы Теги

нижний колонтитул перекрытия динамического контента, но остается в довольном потоком?

Попробуйте: 

\b(?!.*\.?(domain|orsubdomain)\/?.*)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]

Это работает, по крайней мере, с вашими примерами!

5
задан morktron 18 March 2009 в 23:07
поделиться

2 ответа

Это кажется хорошей идеей. Если Вам нужно наложение, то некоторое абсолютное положение должно быть сделано.

Установите свой нижний колонтитул абсолютно на конец страницы и z-index:0. Затем Ваше содержание z-index:1 и дополнительная нижняя часть: (высота нижнего колонтитула - желаемое перекрытие).

3
ответ дан 14 December 2019 в 19:26
поделиться

Можно использовать липкий нижний колонтитул, который я нашел только что в этом вопросе

Я сделал это, которое работает в Firefox, но я не могу заставить его играть по правилам с IE 7. Чья-либо справка была бы потрясающей.

Править: Сделанный им работать

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A CSS Sticky Footer with Overlap</title>
<style type="text/css">
body {
    text-align: center;
}

.wrapper {
    margin: 0 auto -142px;
    position: relative;
    text-align: left;
    width: 700px;
}
.header {
    /*Go download the header yourself from http://ryanfait.com/sticky-footer/header.png
    Please don't steal the guy's bandwidth*/
    background: transparent url(header.png) no-repeat scroll 0 0;
    height: 160px;
}
.footer_bg {
    /*Go download the header yourself from http://ryanfait.com/sticky-footer/footer.jpg
    Please don't steal the guy's bandwidth*/
    background: transparent url(footer.jpg) no-repeat scroll 0 0;
    border: 1px solid blue;
    height: 100%;
    margin: 0 auto;
    width: 700px;
}

.footer {
    clear:both;
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
.footer_bg p {
    bottom: 4px;
    color: #FFFFFF;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    height: auto !important;
    min-height: 100%;
}
.push {
    height: 142px;
    position: absolute;
}
.footer {
    height: 142px;
    z-index: -1;
}
#content {
    z-index: 10;
}

</style>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div id="content">
        <h2>A CSS sticky footer that just works</h2>
        <p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
        <h2>Usage of the CSS</h2>
        <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>
        <p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>
        <p class="download"><a href="layout.css" title="Download the stylesheet">View the CSS</a> or <a href="/resources/footer-stick-to-bottom-of-page/" title="Make a footer stick to the bottom of a page">learn about using it</a></p>
    </div>
    <div class="push"></div>
</div>
<div class="footer">
    <div class="footer_bg">
        <p>Copyright &copy; 2006-2008 <a href="http://ryanfait.com/" title="Las Vegas Web Design">Ryan Fait</a></p>
    </div>
</div>
</body>
</html>
2
ответ дан 14 December 2019 в 19:26
поделиться