Reputation: 323

CSS flex layout, fix element to end

I am trying to make a layout in CSS using flex boxes and I am trying to fix an element to the end by putting a growing separator before it. The layout consists of several choices and a custom choice which gives further options. At the bottom, there are some navigation buttons. I highlighted the separator for confirming its width/height. The thing is, this is working horizontally but not vertically! any ideas?

Edit: It's not obvious in the run snippet here because the height changes, I wanted to fix the last row to the bottom of the page

.row-container {
    list-style: none;
    display: flex; 
    flex-flow: wrap;
    justify-content: space-between;
}

.col-container {
    display: flex; 
    flex-flow: column;
    list-style: none;   
    justify-content: space-between;
}

.scheme {
    height: 100px;;
    margin: 8px;
    padding: 4px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: gainsboro;
    font-size: 1.5em;
    text-align: center;
    flex-grow: 1;
    flex-basis: 15%;
}

.sep {
    flex-grow: 1;
    background-color: gold;
}

.selected {
    background-color: deepskyblue;
    box-shadow: 0 4px 4px 0 gray;
    color: white;
}

.elem {
    flex-grow: 1;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
}

.small-btn {
    flex-basis: 100px;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
    background-color: dimgray;
    color: white;
}

.btn {
    background-color: dimgray;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="col-container">
        <div class="row-container">
            <div class="scheme" id="first">
                Choice1
            </div>
            <div class="scheme" id="second">
                Choice2
            </div>
            <div class="scheme" id="third">
                Choice3
            </div>
            <div class="scheme" id="custom">
                Custom
            </div>
        </div>

        <div class="row-container" id="custom-opt">
            <button class="btn elem">Choose xyz</button>
            <button class="btn elem">Choose abc</button>
        </div>

        <div class="sep"></div>
		
        <div class="row-container">
            <btn class="small-btn">cancel</btn>
            <div class="sep"></div>
            <btn class="small-btn">prev</btn>
            <btn class="small-btn">next</btn>
        </div>
    </div>
	<script>
	var scheme = "";
	$("#custom-opt").hide();
	$(".scheme").click(function () {
		if (scheme!= "") {
			if (scheme==$(this).attr("id")) {return;}
			if (scheme=="custom") {$("#custom-opt").hide();}
			$("#"+scheme).removeClass("selected");
		}
		scheme = $(this).attr("id");
		$(this).addClass("selected");
		if (scheme == "custom") {
			$("#custom-opt").show();
		}
	});
	</script>
</body>
</html>

Upvotes: 0

Answers (2)

Yosef Tukachinsky

Reputation: 5895

just add to .col-container: height:100vw;

Upvotes: 0

Jeremy Thille

Reputation: 26360

Is that what you're trying to do? You need to expand the <body> to use the page's height, then to expand .col-container to use 100% of the height of the <body>.

body{
   height: 100vh; /* Add this */
}

.row-container {
    list-style: none;
    display: flex; 
    flex-flow: wrap;
    justify-content: space-between;
}

.col-container {
    height: 100%; /* And this */
    display: flex; 
    flex-flow: column;
    list-style: none;   
    justify-content: space-between;
}

.scheme {
    height: 100px;;
    margin: 8px;
    padding: 4px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: gainsboro;
    font-size: 1.5em;
    text-align: center;
    flex-grow: 1;
    flex-basis: 15%;
}

.sep {
    flex-grow: 1;
    background-color: gold;
}

.selected {
    background-color: deepskyblue;
    box-shadow: 0 4px 4px 0 gray;
    color: white;
}

.elem {
    flex-grow: 1;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
}

.small-btn {
    flex-basis: 100px;
    margin: 8px;
    padding: 8px;
    border: none;
    text-align: center;
    background-color: dimgray;
    color: white;
}

.btn {
    background-color: dimgray;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="col-container">
        <div class="row-container">
            <div class="scheme" id="first">
                Choice1
            </div>
            <div class="scheme" id="second">
                Choice2
            </div>
            <div class="scheme" id="third">
                Choice3
            </div>
            <div class="scheme" id="custom">
                Custom
            </div>
        </div>

        <div class="row-container" id="custom-opt">
            <button class="btn elem">Choose xyz</button>
            <button class="btn elem">Choose abc</button>
        </div>

        <div class="sep"></div>
		
        <div class="row-container">
            <btn class="small-btn">cancel</btn>
            <div class="sep"></div>
            <btn class="small-btn">prev</btn>
            <btn class="small-btn">next</btn>
        </div>
    </div>
	<script>
	var scheme = "";
	$("#custom-opt").hide();
	$(".scheme").click(function () {
		if (scheme!= "") {
			if (scheme==$(this).attr("id")) {return;}
			if (scheme=="custom") {$("#custom-opt").hide();}
			$("#"+scheme).removeClass("selected");
		}
		scheme = $(this).attr("id");
		$(this).addClass("selected");
		if (scheme == "custom") {
			$("#custom-opt").show();
		}
	});
	</script>
</body>
</html>

Upvotes: 2

CSS flex layout, fix element to end

Answers (2)

Related Questions