Lösa layout- och overflow-problem med Chrome Developer Tools

I denna guide visar jag dig hur du kan justera och lösa vanliga layout- och overflow-problem på webbsidor med Chrome Developer Tools. Med hjälp av ett enkelt exempel bestående av HTML och CSS kommer du att lära dig hur du korrekt ställer in höjden på element och eliminerar onödiga rullningsfält. Verktygen i Developer Tools gör att du kan arbeta direkt i webbläsaren och göra omedelbara ändringar. Nu kör vi!

Viktigaste insikter

• Flexbox hjälper dig att effektivt utforma layouts.
• Höjden på element måste sättas korrekt för att undvika overflow-problem.
• Marginaler och padding kan leda till oönskade rullningsfält, vilka kan åtgärdas genom enkla justeringar.

Steg-för-steg-guide

Kontrollera layout och göra justeringar

Börja med att öppna webbsidan i Chrome och starta Developer Tools. Du kan göra detta genom att högerklicka på sidan och välja "Undersök" eller helt enkelt trycka på F12. Gå sedan till fliken "Element" för att se strukturen av HTML-koden.

Först ska du titta på huvud-Divet som innehåller Flexbox-layoutet. Detta är området där du kan konfigurera ditt Flexbox. Kontrollera att display: flex; appliceras korrekt och att det resterande Divet, som använder Flex 1, har tillräckligt med plats i layouten.

Här ser du att det resterande Divet endast är 18,5 pixlar högt, vilket är för lite för den önskade platsen. Höjden bör justeras så att all tillgänglig plats utnyttjas helt.

Justera höjden på överordnade element

För att säkerställa att ditt resterande Div upptar hela sidans höjd måste du sätta höjden på överordnade element, inklusive body och html, till 100%. Gå tillbaka till stilreglerna och sätt höjden på body till 100%.

Du kommer att märka att ingenting har ändrats ännu. Du måste också kontrollera om html-taggen är inställd på 100% höjd. Detta är ett viktigt krav för att allt ska fungera korrekt.

När du har ställt in höjden på html-taggen till 100% bör layouten visas korrekt. Det resterande Divet kommer nu att fylla hela sidans utrymme.

Förbättra Flexbox-inställningarna

En annan steg är att finjustera Flexbox-inställningarna. Du kan anpassa placeringen av barn-elementen i Flex-behållaren genom att experimentera med alternativ som align-items eller justify-content. Dessa inställningar hjälper dig att kontrollera positionerna för innehållet i din behållare.

När du experimenterar med detta, se till att du observerar den visuella representationen. Upprepa justeringarna tills du är nöjd med placeringen av innehållet.

Identifiera och åtgärda overflow-problem

Du kommer nu att ställas inför ett annat problem, nämligen overflow, som skapar oönskade rullningsfält. För att ta reda på vilka element som är ansvariga för rulllisten, högerklicka på rulllisten och välj "Undersök".

I inspektionsområdet kan du se att body-elementet har en marginal på 8 pixlar. Denna marginal kan vara ansvarig för att din sida har mer än 100% bredd, vilket skapar en overflow.

För att åtgärda detta problem, sätt marginen för body till 0 och kom ihåg att vanligtvis göra en CSS-återställning för att skapa konsistens. Detta innebär att alla marginaler sätts till noll innan du lägger till dina egna marginaler igen.

Justera padding och box-sizing

Efter att du har löst marginproblemet måste du också kontrollera paddingen. I html-taggen kan du även ha ett padding som bidrar till överflödet. Här kan du antingen sätta paddingen till 0 eller så kan du alternativt ställa in box-sizing på border-box. Detta gör att paddingen beaktas inom den definierade bredden och den horisontella rullisten försvinner.

När du har implementerat allt detta bör du nu ha en layoutstruktur utan horisontella rullister som optimerar sig för tillgänglig bildskärmsutrymme.

Summering

I den här handledningen har du lärt dig hur du med Chrome Developer Tools kan identifiera och lösa layoutproblem och överflödesfel på din webbplats. Du har förstått betydelsen av flexbox och rätt höjder samt marginalinställningar för att skapa en estetiskt tilltalande layout.