Karussell Vollbildhöhe und Breite, die alle darunter liegenden Elemente bedeckenCSS

CSS verstehen
Anonymous
 Karussell Vollbildhöhe und Breite, die alle darunter liegenden Elemente bedecken

Post by Anonymous »

Ich habe eine DIV für mein Karussell, und das Div ist auf 100VH abzüglich der Höhe meines NAV -Headers eingestellt ... Das Karussell sieht großartig aus, aber es bedeckt alles, was ich in das Dom steckt ... Hier ist mein HTML: < /p>

Code: Select all

@model ButtaLove.ViewModels.HomeViewModel

@section Title{
Home - ButtaLove Mantequilla-Amor - LaGrange, Georgia
}



@section Description
{
"Category: Personal Care Products,Creator: Annessia Scott,Company: ButtaLove, City: LaGrange, State: Georgia
}










Previous



Next



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


@section Scripts
{



}
< /code>
Hier ist mein CSS: < /p>
html, body {
overflow-y: hidden;
box-sizing: border-box;
}
.ui-datepicker-year{
display:none;
}

#spinner{
position: absolute;
width: 50px;
height: 50px;
top: calc(49% - 50px);
left: calc(49% - 50px);
z-index: 1060;
}
.hide {
display: none;
}

.show {
display: block;
}

.btn{
background-color: #FFC814;
color: #000;
font-weight: bold;
}

.btn:hover {
background-color: #000;
color: #FFC824;
border: 2px solid #ffffff;
transition: all .6s ease-in-out;
}

nav{
height: 116px;
z-index: 2;
}

#logo{
position: sticky;
width: 200px;
top: 0px;
margin-bottom: -40px;
left: calc(50vw - (/* width */200px / 2));
}
.nav-item {
padding: 15% 10%;
}

#hola_button{
pointer-events: none;
cursor: none;
font-size: 1.1em;
}
#logoff_button{
cursor: pointer;
padding: .01% !important;
font-size: 1.6em;
}

#register_button{

}
#page_content{
min-height: calc(100vh - 100px);
}

#join_buttalove_label{
font-size: 3em !important;
text-align: center;
}

#register_modal label{
font-size: 1.9em;
display: inline-block;
}

#register_modal  i {
font-size: 1.9em;
}

#birthday_div >  i {
font-size: 1.9em;
margin-left: 26%;
}
span.datepicker_toggle {
display: inline-block;
position: relative;
width: 80%;
height: 38px;
}
span.datepicker_toggle_button {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.datepicker_input {
position: sticky;
font-size: 1.4em;
padding: 4px 6px 4px 76px;
font-family: "Roboto Thin", serif;
right: 10px;
top: 0;
width: 90%;
height: 100%;
float: right;
margin-right: -98px;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
.datepicker_input::-webkit-calendar-picker-indicator {
position: absolute;
left: 22px;
top: 0;
width: 72%;
height: 100%;
margin-left: -16px;
font-size: 2em;
paddingr: 1px;
cursor: pointer;
opacity: .01;
}

.toast{
width: 40vw !important;
}

#join_buttalove_label{
font-size: 2.3em !important;
}
#login_container button {
display: inline !important;
}

#login_form label{
font-size: 2em;
}

#login_form i{
font-size: 2.7em;
}

#home_slider{
height: calc(100vh - 116px);
background-color: lightyellow;
}

.slide_image{
min-height: calc(100vh - 116px);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#test_paragraph{
min-height: 100vh;
padding: 20%;
background-color: #1861ac;
}
#testimonials{
height: 50vh;
background-color: lightsteelblue;
}

#seasonals{
height: 100vh;
background-color: palegreen;
}
/*#register_container {*/
/*    max-height: 590px;*/
/*}*/

/*#register_container label {*/
/*    color: rgba(0,0,0,.7);*/
/*    font-size: 1.6em;*/
/*    font-weight: 600;*/
/*}*/

/*#register_container label i {*/
/*    color: rgba(0,0,0,.7);*/
/*    font-size: 1.6em;*/
/*    font-weight: 600;*/
/*}*/

/*#register_container input::placeholder {*/
/*    color: rgba(0,0,0,.5);*/
/*}*/

/*#register_container form input {*/
/*    min-height: 5rem;*/
/*    font-size: 1.4em;*/
/*}*/

/*#register_container button i.right {*/
/*    margin-top: -13px;*/
/*}*/

/*#register_container .datepicker-modal, .modal-content .datepicker-container {*/
/*    height: 500px;*/
/*    max-width: 800px;*/
/*}*/

/*#register_container .datepicker-modal .datepicker-controls .select-month input {*/
/*    width: 101px;*/
/*}*/

/*#register_container .datepicker-modal tr td {*/
/*    background-color: rgba(0, 0, 0, .3);*/
/*    color: #212121;*/
/*    margin: 1%;*/
/*}*/

/*#register_container .datepicker-modal tr td button {*/
/*    font-weight: 800;*/
/*}*/

/*#register_container .datepicker-modal .confirmation-btns button {*/
/*    color: #212121;*/
/*}*/

/*#register_container .datepicker-modal tr td.is-selected {*/
/*    background-color: #212121;*/
/*    color: #aa7a31;*/
/*}*/

/*#register_container .datepicker-date-display {*/
/*    background-color: #212121;*/
/*}*/

/*#register_container .datepicker-modal .select-year, #register_container .datepicker-modal .year-text {*/
/*    display: none;*/
/*}*/

/*span.field-icon {*/
/*    color: black;*/
/*    float: right;*/
/*    position: absolute;*/
/*    right: 10px;*/
/*    top: 10px;*/
/*    cursor: pointer;*/
/*    z-index: 2;*/
/*}*/

/*button.datepicker-done::after {*/
/*    color: #212121 !important;*/
/*    content: "OK";*/
/*    font-weight: 700;*/
/*}*/

/*.dropdown-content li > a, .dropdown-content li >  span {*/
/*    font-size: 16px;*/
/*    color: #212121 !important;*/
/*    font-weight: 700;*/
/*    display: block;*/
/*    line-height: 22px;*/
/*    padding: 14px 16px;*/
/*}*/
/*.toast-top-full-width{*/
/*    width: 60vw !important;*/
/*    padding: 10% !important;*/
/*}*/

/*.carousel .carousel-item {*/
/*    height: calc(100vh - 142px);*/
/*}*/

/*.carousel-item img {*/
/*    position: absolute;*/
/*    background: rgba(255, 255, 255, 0.73);*/
/*    top: 0;*/
/*    left: 0;*/
/*    min-height: calc(100vh - 173px);*/
/*}*/

/*.carousel-caption {*/
/*    background: rgba(0, 0, 0, .8);*/
/*    border-radius: 30px;*/
/*    padding: 2%;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    font-size: 26px;*/
/*    width: 42%;*/
/*    margin: 0 auto;*/
/*}*/

/*h1, h2, h3, h4, h5 {*/
/*    font-family: 'Quantico', sans-serif;*/
/*    color: #DE9D3A;*/
/*}*/

/*.carousel-caption h5 {*/
/*    color: #FAFCFF;*/
/*    font-weight: bold;*/
/*}*/

/*.carousel-caption p {*/
/*    font-size: .8em;*/
/*    color: #fff;*/
/*}*/

/*.carousel-indicators button {*/
/*    background-color: #002566 !important;*/
/*}*/

/*.carousel-control-prev-icon,*/
/*.carousel-control-next-icon {*/
/*    height: 80px;*/
/*    width: 80px;*/
/*    outline: #fff;*/
/*    background-size: 100%, 100%;*/
/*    border-radius: 50%;*/
/*    border: 1px solid #fff;*/
/*    background-color: rgba(0, 0, 0, 0.90);*/
/*    color: #FAFCFF;*/
/*    font-weight: bolder;*/
/*    padding: 2%;*/
/*    !*    background-image: none;*!*/
/*}*/

/*!*    .carousel-control-next-icon:after {*/
/*        content: '>';*/
/*        font-size: 55px;*/
/*        color: #fff;*/
/*    }*!*/

/*!*    .carousel-control-prev-icon:after {*/
/*        content: '

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post