-1

Estou tentando fazer com que esse retângulo rosa ocupe o restante da tela, mais especificamente... height responsivo, tentei algumas formas, porém sem êxito. Como proceder?

OBS: estou utilizando o styled-components

inserir a descrição da imagem aqui

index.js

return(
    <Container showsVerticalScrollIndicator={false}>
      <ContainerValue>

      </ContainerValue>

        <ContainerRun>
          <Output>

          </Output>

          <Output>
            
          </Output>

          <ContainerButton>
            <ButtonInit>

            </ButtonInit>
          </ContainerButton>
          
        </ContainerRun>
    </Container>
  );

styles.js

export const Container = styled.ScrollView`
  flex: 100%;
  background-color: ${colors.greyRegular};
  padding-left: 15px;
  padding-right: 15px;
`;

export const ContainerValue = styled.View`
  width: 55%;
  height: 140px;
  border-radius: 10px;
  align-self: center;
  margin-top: 25px;
  background-color: ${colors.white};
`;

export const ContainerRun = styled.View`
  width: 100%;
  border-radius: 10px;
  align-self: center;
  margin-top: 50px;
  margin-bottom: 15px;
  background-color: pink;
`;

export const Output = styled.View`
  width: 90%;
  height: 50px;
  border-radius: 10px;
  align-self: center;
  margin-top: 50px;
  background-color: ${colors.greyRegular};
`;
export const ContainerButton = styled.View`
  flex: 100%;
  justify-content: flex-end; 
`;

export const ButtonInit = styled.TouchableOpacity`
  width: 250px;
  height: 80px;
  border-radius: 10px;
  align-self: center;
  margin-bottom: 15px;
  background-color: ${colors.yellowRegular};

`;

1 Resposta 1

1

Para que o retângulo ocupe um espaço definido por height: 100% ou qualquer outro valor, é necessário que o bloco que o contém tenha também uma altura definida, qualquer que seja. Seria assim:

<content-wrapper>
  <box></box>
</content-wrapper>

E o estilo

content-wrapper { height: 400px; }
box { height: 100% }

Você também pode usar o Flex para garantir que a altura funcione bem.

.container {
    display: flex;
    flex-direction: column;
    background-color: #ddd;
    padding-left: 15px;
    padding-right: 15px;
    height:100vh;
}

.containerValue {
    width: 55%;
    height: 140px;
    border-radius: 10px;
    align-self: center;
    margin-top: 25px;
    background-color: white;
}

.containerRun {
    flex-grow: 1;
    width: 100%;
    border-radius: 10px;
    align-self: center;
    margin-top: 50px;
    margin-bottom: 15px;
    background-color: pink;
}
    <div class="container">
        <div class="containerValue">
  
        </div>
  
        <div class="containerRun">
            
        </div>
    </div>

Converti em html/css puro e mexi só na parte que modifica altura dos boxes.

3
  • Primeiramente muito obrigada por dedicar um pouco do seu tempo para me responder, fiz as alterações e funcionou em partes, o bloco está responsivo porém não ocupa o resto da tela. =(
    – Luh
    3/06/2020 às 17:27
  • Descobri que o problema estava no container base, pois estou utilizando ScrollView e ela tem um funcionamento diferente
    – Luh
    3/06/2020 às 17:35
  • 1
    Ah, que isso! :) Eu não conheço de React, mas essa parte de ajustar altura de um bloco é um pouco chata mesmo. Você pode usar vh que corresponde a 1% da altura da janela de visualização. No caso o viewport do dispositivo. Desse modo, você vai definir uma altura que vai cobrir toda a área visível disponível, como usado em .container. Assim você vai ajustando. Esses links podem te ajudar: stackoverflow.com/questions/21224411/… ou developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/… 3/06/2020 às 23:11

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 .