margin-right zeigt nicht

Unten ist mein CSS- und HTML-Code. Wie Sie sehen können, kommt der Rand rechts nicht.margin-right zeigt nicht

Kann mir jemand den Grund dafür sagen?
Ist die Struktur von HTML, CSS richtig? Ich muss zwei Fenster in der Mitte der Seite und eine Fußzeile und eine Kopfzeile zeigen. Also, ich habe alles absolut positioniert.

Ist das korrekt?

*{ 
 
    margin:0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body{ 
 
    min-height: 100vh; 
 
    min-width: 100vh; 
 
} 
 

 
.wrapper{ 
 
    position: absolute; 
 
    top: 0%; 
 
    bottom: 0%; 
 
    left: 0%; 
 
    right: 0%; 
 
    background-color: #666; 
 
    overflow-x: hidden; 
 
} 
 

 
.header{ 
 
    position: absolute; 
 
    margin: 0; 
 
    top: 0%; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: #fff; 
 
} 
 

 
.footer{ 
 
    position: absolute; 
 
    bottom: 0%; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: #f7f7f7; 
 
} 
 

 
.header .brand-header{ 
 

 
} 
 

 
.window{ 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 10%; 
 
    bottom: 10%; 
 
    background-color: #eee; 
 
    margin: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Layout</title> 
 
</head> 
 
<body> 
 

 
<div class="wrapper"> 
 
    <div class="header"> </div> 
 

 
    <div class="window"> 
 
     <div class="sub-window left-window"> </div> 
 
     <div class="sub-window right-window"> </div> 
 
    </div> 
 

 
    <div class="footer"> </div> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-01-13 nrgwsth

Es wäre in diesem Fall hilfreich sein, eine Fiddle aufzunehmen. – Utkanos

Seien Sie vorsichtig mit der Position, seien Sie sehr vorsichtig. –

@Utkanos warum? Das Snippet sollte immer bevorzugt werden, da der gesamte Code hier bleibt. – Esko

Nehmen Breite calc wie

.window { 
    background-color: #eee; 
    bottom: 10%; 
    margin: 10px; 
    position: absolute; 
    top: 10%; 
    width: calc(100% - 20px); /*You apply margin:10px;*/ 
}

Quelle

2017-01-13 11:23:49

dass, nur weil Ihre Breite beträgt 100% ist und Sie eine Marge von 20 px (margin-left angewendet: 10, Rand- rechts: 10) => es erfordert Platz von 100% + 20px. das ist der Grund für Sie können Marge auf Ihrer rechten Seite verfolgen.

Verwenden Sie width: calc(100% - 20px); auf Ihrem .window, es wird gut funktionieren.

*{ 
 
\t margin:0; 
 
\t padding: 0; 
 
\t box-sizing: border-box; 
 
} 
 

 
body{ 
 
\t min-height: 100vh; 
 
\t min-width: 100vh; 
 
} 
 

 
.wrapper{ 
 
\t position: absolute; 
 
\t top: 0%; 
 
\t bottom: 0%; 
 
\t left: 0%; 
 
\t right: 0%; 
 
\t background-color: #666; 
 
\t overflow-x: hidden; 
 
    
 
} 
 

 
.header{ 
 
\t position: absolute; 
 
\t margin: 0; 
 
    top: 0%; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: #fff; 
 
} 
 

 
.footer{ 
 
\t position: absolute; 
 
\t bottom: 0%; 
 
\t height: 10%; 
 
\t width: 100%; 
 
\t background-color: #f7f7f7; 
 
} 
 

 
.header .brand-header{ 
 

 
} 
 

 
.window{ 
 
\t position: absolute; 
 
\t width: calc(100% - 20px); 
 
\t top: 10%; 
 
\t bottom: 10%; 
 
\t background-color: #eee; 
 
\t margin: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Layout</title> 
 
</head> 
 
<body> 
 

 
<div class="wrapper"> 
 
\t <div class="header"> 
 
\t </div> 
 

 
\t <div class="window"> 
 
\t \t <div class="sub-window left-window"> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t <div class="sub-window right-window"> 
 
\t \t \t 
 
\t \t </div> 
 

 
\t </div> 
 

 
\t <div class="footer"> 
 
\t \t 
 
\t </div> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2017-01-13 11:24:37

margin-right zeigt nicht

Antwort

Verwandte Themen