-1

Tenho uma página com navbar e com uma div que contém um logo, um parágrafo com texto e depois um botão, tudo na mesma div, cada componente abaixo da outra na ordem referida anteriormente.

A minha questão é, a descrição não sou eu que vou fazer e consequentemente não sei o tamanho que vai ter, sei que não vai ser nada muito elaborado mas ainda assim queria perguntar se é possível fazer com que o botão abaixo da descrição não se mova, quando se diminui ou aumenta a descrição. Ou seja, cada vez que diminuo a descrição ele vem para cima e cada vez que aumento ele vai para baixo.

Já experimentei com overflow: hidden, e várias outras formas que fui vendo aqui no Stackoverflow e no Google, mas até agora não encontrei nada que funcionasse.

.desc-div{
    top: 0;
    bottom: 0;
    overflow: hidden;
    margin-bottom: 15px;
    text-align: center;
    min-height: 100%;

}

.logo {
    position: relative;
    width: 55px;
    height: 55px;
    margin-top: 6%;
}

.desc {
    font-size: 15px;
    color: white;
    position: relative;
    margin-top: 6%;
    margin-bottom: 10%;
    padding: 2%;
}

.desc-div2 {
    height: 100%;
}


.desc-div2 svg {
    position: relative;
    width: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 2001;
    margin-left: 15px;
}
<div class="desc-div header pt-lg-8 align-items-center"> 
    <div class="desc-div2 container-fluid align-items-center">
        <img class="logo" src="/img/logo.svg">
        <p class="desc"><%= __('Hi hello my name is, and I live next door...............................') %></p>
        <a>
            <svg x="0px" y="0px" viewBox="0 0 30 28" xml:space="preserve">
                <path fill="#D9BD45" d="M28.97,20.884c0.558,0,1.03,0.475,1.03,1.035v5.047C30,27.569,29.528,28,28.97,28H1.028 C0.472,28,0,27.569,0,26.965v-5.047c0-0.559,0.472-1.035,1.028-1.035H28.97z"/>
                <path fill="#D9BD45" d="M28.496,0.179L15,10.61L1.504,0.179C0.894-0.271,0,0.179,0,0.955V6.6c0,0.288,0.162,0.655,0.284,0.737 L15,18.231L29.716,7.337C29.838,7.256,30,6.888,30,6.6V0.955C30,0.179,29.106-0.271,28.496,0.179z"/>
            </svg>
        </a>
    </div>
</div>

1
  • Cara, se o botão não se mover para baixo o botão vai sobrepor o conteúdo da descrição conforme for aumentado. É realmente isso que você quer?
    – user168020
    16/11/2019 às 20:26

1 Resposta 1

0

Use position: absolute com bottom: 15px no svg que ele irá ficar fixo na parte de baixo da tela, sem sofrer influência do parágrafo ou de outro elemento, porque ficará posicionado de forma absoluta dentro da div.

Esse 15px no bottom você coloca o valor que quiser e achar melhor para dar um espaçamento da parte de baixo.

Agora, é preciso adicionar...

html, body{
   height: 100%;
}

...para que a div consiga ter a altura de 100%, como você quer em min-height: 100%;. Também não vejo função para a tag <svg> estar dentro desse <a>. Também não precisa do margin-left: 15px no svg, por isso deixei comentado essa linha no CSS abaixo:

html, body{
   background: #000;
   height: 100%;
}

.desc-div{
    top: 0;
    bottom: 0;
    overflow: hidden;
    margin-bottom: 15px;
    text-align: center;
    min-height: 100%;

}

.logo {
    position: relative;
    width: 55px;
    height: 55px;
    margin-top: 6%;
}

.desc {
    font-size: 15px;
    color: white;
    position: relative;
    margin-top: 6%;
    margin-bottom: 10%;
    padding: 2%;
}

.desc-div2 {
    height: 100%;
}


.desc-div2 svg {
    position: absolute;
    width: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 2001;
    /*margin-left: 15px; removido */
    bottom: 15px;
}
<div class="desc-div header pt-lg-8 align-items-center"> 
    <div class="desc-div2 container-fluid align-items-center">
        <img class="logo" src="/img/logo.svg">
        <p class="desc">Hi hello my name is, and I live next door</p>
         <svg x="0px" y="0px" viewBox="0 0 30 28" xml:space="preserve">
             <path fill="#D9BD45" d="M28.97,20.884c0.558,0,1.03,0.475,1.03,1.035v5.047C30,27.569,29.528,28,28.97,28H1.028 C0.472,28,0,27.569,0,26.965v-5.047c0-0.559,0.472-1.035,1.028-1.035H28.97z"/>
             <path fill="#D9BD45" d="M28.496,0.179L15,10.61L1.504,0.179C0.894-0.271,0,0.179,0,0.955V6.6c0,0.288,0.162,0.655,0.284,0.737 L15,18.231L29.716,7.337C29.838,7.256,30,6.888,30,6.6V0.955C30,0.179,29.106-0.271,28.496,0.179z"/>
         </svg>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .