Programmiererforum

import BookComp from "./BookComp.jsx";
import { useState, useEffect } from "react";
import "./css/App.css";
import { getBook } from "./Api.js";

function App() {
const [books, setbooks] = useState([]);
const [click, setClick] = useState(0);
const [searchFetch, setSearchFetch] = useState({});
useEffect(() => {
getBook(searchFetch).then((result) => {
setbooks(result);
});
}, [click]);
return (


 {
setSearchFetch({ text: e.target.value });
}}
/>
 setClick((c) => c + 1)}
>
asdad


{books.map((bok) => (

))}



);
}

export default App;
< /code>
Dies ist meine JS -Datei < /p>
body {
margin: 0;
width: 100%;
min-height: 100vh;
position: relative;
}

< /code>
Index.html CSS -Datei < /p>
.navbar {
position: fixed;
top: 0;
left: 0; /* Ensure it starts from the very left */
width: 100vw; /* Use viewport width to cover the entire screen */
background-color: #46617b; /* Slightly darker gray background */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
z-index: 1000; /* Ensure it stays on top */
height: 70px; /* Increased height */
padding: 0 20px; /* Optional: Add horizontal padding */
}

.inputfield {
position: absolute;
right: 150px; /* Adjusted to move it a bit left */
top: 50%;
transform: translateY(-50%);
border-radius: 8px;
transition: all 0.3s ease;
font-size: 18px;
padding: 10px 15px;
}

.searchButton {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
padding: 10px 15px;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
}

.grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Ensure only 2 objects per line */
gap: 1.5rem;
padding: 1rem;
width: 100%;
box-sizing: border-box;
margin-top: 70px; /* Push the grid content below the navbar */
}

.home {
box-sizing: border-box;
}

Ich mache mein erstes Projekt mit React und fand ein Problem. Ich kann nicht scrollen. Ich habe versucht, überlaufende Größen ETX hinzuzufügen. aber immer noch nichts < /p>
[code]import BookComp from "./BookComp.jsx";
import { useState, useEffect } from "react";
import "./css/App.css";
import { getBook } from "./Api.js";

function App() {
const [books, setbooks] = useState([]);
const [click, setClick] = useState(0);
const [searchFetch, setSearchFetch] = useState({});
useEffect(() => {
getBook(searchFetch).then((result) => {
setbooks(result);
});
}, [click]);
return (


{
setSearchFetch({ text: e.target.value });
}}
/>
setClick((c) => c + 1)}
>
asdad


{books.map((bok) => (

))}



);
}

export default App;
< /code>
Dies ist meine JS -Datei < /p>
body {
margin: 0;
width: 100%;
min-height: 100vh;
position: relative;
}

< /code>
Index.html CSS -Datei < /p>
.navbar {
position: fixed;
top: 0;
left: 0; /* Ensure it starts from the very left */
width: 100vw; /* Use viewport width to cover the entire screen */
background-color: #46617b; /* Slightly darker gray background */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
z-index: 1000; /* Ensure it stays on top */
height: 70px; /* Increased height */
padding: 0 20px; /* Optional: Add horizontal padding */
}

.inputfield {
position: absolute;
right: 150px; /* Adjusted to move it a bit left */
top: 50%;
transform: translateY(-50%);
border-radius: 8px;
transition: all 0.3s ease;
font-size: 18px;
padding: 10px 15px;
}

.searchButton {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
padding: 10px 15px;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
}

.grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Ensure only 2 objects per line */
gap: 1.5rem;
padding: 1rem;
width: 100%;
box-sizing: border-box;
margin-top: 70px; /* Push the grid content below the navbar */
}

.home {
box-sizing: border-box;
}

[/code]
Dies ist eine CSS -Datei
Ich habe versucht, die Heimhöhe auf 150 VH zu wechseln, und das war die einzige Situation, als die Scroll -Balken erschien, aber die Seite