Container voller Breite

zunächst einmal, sorry für den Titel nicht wirklich explizitenContainer voller Breite

Hier ist mein Problem: Ich habe Behälter, in ihm eine Sidebar, die 280px ist, und ich möchte die Homepage voll machen Breite. Aber wenn ich schreibe, so etwas wie dieses

.container { 
    width: 100%; 

    .sidebar { 
    width: 280px; 
    } 

    .home { 
    width: 100%; 
    } 
}

die Homepage geht unter, und ich möchte beiseite die Seitenleiste positionieren. Aber ich habe keine Ahnung, wie es zu tun

Quelle

2017-08-15 Mavrick RMX'

meinst du machen der 'home' div nimmt den Rest des Raumes auf? Es ist nicht klar, was Sie fragen. –

Mögliches Duplikat - https://stackoverflow.com/questions/1260122/expand-a-iv-to-take-the-remaining-width –

Könnten Sie bitte ein funktionierendes Snippet bereitstellen? –

Hier ist eine CSS-Lösung 0 mitminus die .sidebar width von .home

#container { 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
#container .sidebar { 
 
    width: 280px; 
 
    height: 100%; 
 
    background: blue; 
 
    display: inline-block; 
 
    color:#fff; 
 
} 
 

 
#container .home { 
 
    width: calc(100% - 285px); 
 
    height: 100%; 
 
    background: yellow; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <div class="sidebar">SideBar</div> 
 
    <div class="home">Home</div> 
 
</div>

Quelle

2017-08-15 12:08:34 frnt

Super! es funktioniert super. Danke dir –

Willkommen @MavrickRMX ':-) – frnt

Im Folgenden wird eine Sidebar mit einer festen Breite von 280px und ein div (.home) mit einer Flüssigkeit Breite erstellen:

SCSS

.container { 
    width: 100%; 
    overflow:hidden; 

    .sidebar { 
    float:right; /* or float:left for left sidebar */ 
    width:280px; 
    } 

    .home { 
    margin-right:280px; /* or margin-left for left sidebar */ 
    } 
}

HTML

<div class="container"> 
    <div class="sidebar"> 

    </div> 
    <div class="home"> 

    </div> 
</div>

Quelle

2017-08-15 12:05:23 kinggs

Und der Grund für die Abstimmung down? – kinggs

Diese Arbeit sollte: https://jsfiddle.net/0bsygLsh/

.container { 
    width: 100%; 
    overflow:hidden; 

    .sidebar { 
    width:280px; 
    display:inline-block; 
    float:left; 
    } 

    .home { 
    width:auto; 
    } 
}

Quelle

2017-08-15 12:13:25 pryolo

Es scheint, wie Sie benötigen über die CSS-Eigenschaft display zu lesen. Dies ist vielleicht das Wichtigste, was man im Umgang mit CSS wissen sollte. Sehen Sie hier https://www.w3schools.com/cssref/pr_class_display.asp

Hier ist ein Beispiel für die Verwendung display: flex, um Ihr Problem zu lösen. Ihr Problem könnte jedoch auf verschiedene Arten gelöst werden. Erwägen Sie es selbst zu versuchen mit display: inline.

.container { display: flex; height: 100vh; } .sidebar { flex-basis: 100px; background-color: red; } .home { flex: 1; background-color: blue; }

<div class="container"> <div class="sidebar"> I'm the sidebar </div> <div class="home"> I'm the home page </div> </div>

Quelle

2017-08-15 12:14:15 Normangorman

Yeah werde ich. Meistens verwende ich nur 'inline',' inline-block' für die Eigenschaft 'display' Deshalb war mir das nicht bewusst Danke für das Wissen!:) –

Wenn Sie möchten, sollten auf ihm sein, das Haus div volle Breite und die Seitenleiste div machen, dann wird die CSS folgende sein:

.container { 
     width: 100%; 
     position: relative; 
    } 
    .sidebar { 
     width: 280px; 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    .home { 
     width: 100%; 
     padding-left: 280px; 
    }

Oder wenn Sie wollen sie nebeneinander halten, dann sollte das css folgen:

.container { 
     width: 100%; 
} 
.container:after { 
    display: table; 
    content: ""; 
    clear: both; 
} 
.sidebar { 
    float: left; 
    width: 280px; 
} 

.home { 
    float: left; 
    width: calc(100% - 280px); 
}

Quelle

2017-08-15 12:21:42 Shuvo

Container voller Breite

Antwort

Verwandte Themen