覆盖页脚的图像

小编典典

覆盖页脚的图像

all

出于某种原因，当我将图像添加到

时，div 不会动态增加大小，而是会简单地覆盖不应该发生的页脚，尽管这似乎是一个相对简单的问题，但可能需要一些帮助. 根据我提交的图像数量，我希望 < div class=”resto1” > 仅更改 resto2 的大小。

JSFiddle 链接：https ://jsfiddle.net/mjyk8dzw/1/

<section>

    <div class="totall">
        <div class="barraesquerda">

            <button class="divbotao" id="showit">
                <span href="#" class="innerButton">
                    sobre o projeto
                </span>
            </button>

            <button class="divbotao" id="showit2">
                <span href="#" class="innerButton">
                    equipa e intervenientes
                </span>
            </button>

        </div>

        <div class="resto">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Sobre o projeto
            </h3>

            <h5
                style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px; padding-bottom: 45px;">
                <b>duis a mollis urna. In hac habitasse platea dictumst. Vestibulum nisi nunc, elementum et vehicula
                    vel, rhoncus non metus.
                    In vel dapibus dolor. Sed at laoreet turpis. Donec nec aliquam velit. Quisque blandit nisi
                    mauris.</b>
            </h5>
        </div>

阅读 45

2022-08-24

共1个答案

小编典典

我设法将代码编辑为您想要的。下面，编辑代码：

//========================HTML=======================/ /

    <html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<section class="section" >

    <div class="totall">
        <div class="barraesquerda">

            <button class="divbotao" id="showit">
                <span href="#" class="innerButton">
                    sobre o projeto
                </span>
            </button>

            <button class="divbotao" id="showit2">
                <span href="#" class="innerButton">
                    equipa e intervenientes
                </span>
            </button>

        </div>

        <div class="resto">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Sobre o projeto
            </h3>

            <h5
                style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px; padding-bottom: 45px;">
                <b>duis a mollis urna. In hac habitasse platea dictumst. Vestibulum nisi nunc, elementum et vehicula
                    vel, rhoncus non metus.
                    In vel dapibus dolor. Sed at laoreet turpis. Donec nec aliquam velit. Quisque blandit nisi
                    mauris.</b>
            </h5>
        </div>

        <div class="resto2" style="display: none;">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Equipa e intervenientes
            </h3>

            <div style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px;  padding-bottom: 20px;">

                <section class="product_section layout_padding">
                    <div style="padding-top: 20px;">
                        <div class="container">
                            <div class="row justify-content-center mt-3">

                                <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://img.freepik.com/vetores-gratis/ilustracao-do-icone-dos-desenhos-animados-da-meditacao-do-unicornio-fofo_138676-2262.jpg?w=2000" alt="">
                                        </div>
                                </div>

                                 <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://i.pinimg.com/564x/32/c7/3a/32c73aaec6d5eff3d183011fec6e43a1.jpg" alt="">
                                        </div>
                                </div>

                                    <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://i.pinimg.com/564x/8e/c2/45/8ec245dfe94c87cc3d325970f2907982.jpg" alt="">
                                        </div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>

<footer>
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="full">
                                <div class="information_f">
                                <p><strong style="color: white;">CENTRO</strong></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               </footer>

<script>
$(function() {
    $('button#showit').on('click', function() {
        $('.resto').show();
        $('.resto2').hide();
        $('.section').removeClass('teste');
    });

    $('button#showit2').on('click', function() {
        $('.resto2').show();
        $('.resto').hide();
        $('.barraesquerda').addClass('teste2');
        $('.section').addClass('teste');
    });
});
</script>
</html>

//========================CSS=======================/ /

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.resto, .resto2, footer {
    margin-left: 22%;
}
.teste {
    height: fit-content;
}

.teste2{
    position: absolute;
    min-height: 100%;
}
footer {
    background: #333F50;
    padding: 90px 0 70px;
  }

  .totall {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .barraesquerda {
    background-color: #dbdee1;
    float: left;
    width: 22%;
    height: 100%;
    position: fixed;
  }

  .image {
    position: relative;
    margin-right: 1.4rem;
    margin-bottom: 3rem;
    color: white;
    z-index: 1;
    display: flex;
    justify-content: center;
  }

  .image::after {
    content: "";
    position: absolute;
    background: linear-gradient(0deg, rgba(39, 38, 42, 1) 0%, rgba(255, 255, 255, 0) 60%);
    z-index: 2;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }

根据 div ‘.resto’ 的内容，插入了 div ‘.resto’ 和 ‘.resto2’ 的所有内容的 div ‘.total’ 已经有一个定义的高度，所以当您展示了“.resto2” div，它继续使用原始样式。

变化：

1 - 我在你的脚本中添加了一个命令来添加’.teste’类，这个类将添加’height：fit-content’属性，它将考虑’.teste2’的内容，当你点击其他按钮（将显示 div ‘.test’ 的内容）它将删除此类并恢复为原始格式。

2 - 我为它添加了以下 CSS 命令来删除浏览器的默认格式，因为它会留下白色边距。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3 - 由于 ‘.barra Esquerda’ 类是一个菜单，我将高度设置为 ‘100%’ 并将位置设置为 ‘fixed’，这样，无论您的页面大小如何，菜单的高度都将始终为与页面相同。

4 - 由于您的菜单的宽度为 22%，我将所有其他元素的边距为 22%，因此它们不会进入菜单下方。

葡萄牙语翻译（葡萄牙语翻译）

变化：

2 - 我为它添加了以下 CSS 命令来删除浏览器的默认格式，因为它会留下白色边距。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

4 - 由于您的菜单的宽度为 22%，我将所有其他元素的左侧边距设置为 22%，因此它们不会进入菜单下方。

2022-08-24