Displaying scroll bars on Top & Bottom of a DIV

Question

I\'m trying to display top & bottom horizontal scroll bars for a div. I found this SO question and changed page code accordingly.

HTML/Razor

Answer 1

You can achieve by some tweaks in your HTML and CSS as given below;

HTML Should look like this:

    

    


    

        @Html.Markdown(Model.Contents)  
    

CSS Should look like this:

wmd-view-topscroll, .wmd-view {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 300px;
    border: none 0px RED;
}

.wmd-view-topscroll { height: 20px; }
.wmd-view { height: 200px; }
.scroll-div1 { 
    width: 1000px; 
    overflow-x: scroll;
    overflow-y: hidden;
}

.scroll-div2 { 
    width: 1000px; 
    height:20px;
}

SEE DEMO