Как сделать мой код отзывчивым? Я хочу, чтобы прокрутка была добавлена на всю страницу, когда Flexbox завершается новой линией, а не только в Div Flexbox. Я почти ничего не понимаю о Frontend, и это на самом деле учебный проект, но я не могу найти ответ на мою проблему нигде. Как бы вы сделали этот код отзывчивым? Я могу предоставить ссылку GitHub, если это необходимо. < /P>
"use client";
import "./cadastrar-usuario.css";
import BotaoRedondo from "../components/botaoRedondo/botaoRedondo";
import { useState } from "react";
import BotaoRedondoSubmit from "../components/botaoRedondoSubmit/botaoRedondoSubmit";
export default function CadastroUsuario() {
const [formData, setFormData] = useState({
primeiroNome: "",
ultimoNome: "",
usuario: "",
email: "",
senha: "",
confirmarSenha: "",
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};
const [erro, setErro] = useState();
const handleSubmit = async (e) => {
e.preventDefault();
// Erro: As senhas devem coincidir
if (formData.senha !== formData.confirmarSenha) {
setErro("Erro! As senhas não coincidem!");
return;
}
setErro("");
try {
const response = await fetch("http://localhost:8000/en/api/users/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body:
JSON
.stringify({
first_name: formData.primeiroNome,
last_name: formData.ultimoNome,
username: formData.usuario,
email: formData.email,
password: formData.senha,
}),
credentials: "include",
});
if (!response.ok) {
const errorData = await response.json();
const firstKey =
Object
.keys(errorData)[0];
const errorMessage = errorData[firstKey]?.[0];
setErro(errorMessage);
return;
}
const data = await response.json();
console
.log(data);
window
.location.href = "/login";
} catch (error) {
console
.error(error);
setErro("Erro inesperado! Tente novamente mais tarde!");
}
};
return (
Cadastrar-se
{erro && & l t ; d i v c l a s s N a m e = & q u o t ; e r r o & q u o t ; & g t ; { e r r o } & l t ; / d i v & g t ; } < b r / > & l t ; / d i v & g t ; < b r / >
Primeiro nome:
Último nome:
Usuário:
E-mail:
Senha:
Confirmar senha:
);
}
"use client";
import "./cadastrar-usuario.css";
import BotaoRedondo from "../components/botaoRedondo/botaoRedondo";
import { useState } from "react";
import BotaoRedondoSubmit from "../components/botaoRedondoSubmit/botaoRedondoSubmit";
export default function CadastroUsuario() {
const [formData, setFormData] = useState({
primeiroNome: "",
ultimoNome: "",
usuario: "",
email: "",
senha: "",
confirmarSenha: "",
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};
const [erro, setErro] = useState();
const handleSubmit = async (e) => {
e.preventDefault();
// Erro: As senhas devem coincidir
if (formData.senha !== formData.confirmarSenha) {
setErro("Erro! As senhas não coincidem!");
return;
}
setErro("");
try {
const response = await fetch("http://localhost:8000/en/api/users/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
first_name: formData.primeiroNome,
last_name: formData.ultimoNome,
username: formData.usuario,
email: formData.email,
password: formData.senha,
}),
credentials: "include",
});
if (!response.ok) {
const errorData = await response.json();
const firstKey = Object.keys(errorData)[0];
const errorMessage = errorData[firstKey]?.[0];
setErro(errorMessage);
return;
}
const data = await response.json();
console.log(data);
window.location.href = "/login";
} catch (error) {
console.error(error);
setErro("Erro inesperado! Tente novamente mais tarde!");
}
};
return (
Cadastrar-se
{erro && {erro}}
Primeiro nome:
Último nome:
Usuário:
E-mail:
Senha:
Confirmar senha:
);
}
.pagina-contatiner {
display: flex;
overflow-y: auto;
}
html, body {
height: 100%; /* Garantir que o body ocupe 100% da altura */
overflow-y: auto; /* Permite a rolagem */
margin: 0; /* Remover margens padrão */
}
.background-img {
position: fixed; /* Mantém a imagem fixa no fundo */
top: 0;
left: 0;
width: 100%;
height: 100%; /* Cobrir toda a tela */
background-image: url('../../../public/images/login-background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1; /* Manter a imagem atrás de todos os outros conteúdos */
}
.menu {
position: fixed; /* Fixa o menu no fundo */
bottom: 0;
left: 0;
width: 100%;
height: 25vh; /* Ajuste conforme necessário */
background-color: #441C1C;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
z-index: 1; /* Garantir que o menu fique acima da imagem */
}
.content {
flex-grow: 1; /* Permite que o conteúdo cresça e ocupe o espaço disponível */
padding-bottom: 25vh; /* Adiciona um espaço para o menu fixo */
overflow-y: auto; /* Permite a rolagem vertical */
min-height: 100vh; /* Garante que a div tenha altura mínima */
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 5px;
}
.cadastro-div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.cadastro {
font-size: 1.8rem;
color: #FFFFFF;
text-shadow: 1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000;
margin: 0;
}
.input-div {
display: flex;
flex-direction: column;
margin: 0 15px;
}
.inputs-superiores {
display: flex;
justify-content: space-around;
}
.inputs-inferiores {
display: flex;
justify-content: space-around;
}
.label {
color: #FFFFFF;
font-weight: bold;
}
.pagina-contatiner {
display: flex;
overflow-y: auto;
}
html, body {
height: 100%; /* Garantir que o body ocupe 100% da altura */
overflow-y: auto; /* Permite a rolagem */
margin: 0; /* Remover margens padrão */
}
.background-img {
position: fixed; /* Mantém a imagem fixa no fundo */
top: 0;
left: 0;
width: 100%;
height: 100%; /* Cobrir toda a tela */
background-image: url('../../../public/images/login-background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1; /* Manter a imagem atrás de todos os outros conteúdos */
}
.menu {
position: fixed; /* Fixa o menu no fundo */
bottom: 0;
left: 0;
width: 100%;
height: 25vh; /* Ajuste conforme necessário */
background-color: #441C1C;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
z-index: 1; /* Garantir que o menu fique acima da imagem */
}
.content {
flex-grow: 1; /* Permite que o conteúdo cresça e ocupe o espaço disponível */
padding-bottom: 25vh; /* Adiciona um espaço para o menu fixo */
overflow-y: auto; /* Permite a rolagem vertical */
min-height: 100vh; /* Garante que a div tenha altura mínima */
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 5px;
}
.cadastro-div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.cadastro {
font-size: 1.8rem;
color: #FFFFFF;
text-shadow: 1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000;
margin: 0;
}
.input-div {
display: flex;
flex-direction: column;
margin: 0 15px;
}
.inputs-superiores {
display: flex;
justify-content: space-around;
}
.inputs-inferiores {
display: flex;
justify-content: space-around;
}
.label {
color: #FFFFFF;
font-weight: bold;
}
Подробнее здесь: https://stackoverflow.com/questions/794 ... responsive
