Develop Reference

How to perfectly adjust the chat room layout block through CSS

this time I encountered a CSS cutting board problem. I would like to ask you a question here. I have dealt with it myself for two days and still cannot overcome the problem~
My English is not good, I try to describe it completely, sorry~ The
problem is as follows:
There is a chat room. The blue color is a space between the menu of the webpage and the chat area below (the white side is the distance that must be maintained).
Problem 1: My chat room is set by the designer because of the size, but because of the chat room The content of the window is very large, so in the end there will be a scroll on the right side of the entire window, but in fact the scroll should not appear at the end.
Question 2: When the messages continue to increase in the yellow conversation in the chat room, it can be scrolled just like normal communication software. I have set calc(100vh-295px) in chat_body. Why do I set 295 arbitrarily? This is because I don’t want the chat dialogue area to cause problems with the entire layout due to the increase of messages, but now how to set it will cause scrolling to the bottom. The message will be blocked by the green block below, or the chat dialogue area will cause too much message content to run out of the publishing page. Question~I
want to ask you how to set up to achieve a complete view of the content of the entire chat dialogue area, and fix the entire chat room window at the bottom of the entire web page without scrolling on the right side?
Thank you for watching my question.
.wrap {
width: 90%;
margin: 0 auto;
}
.head {
width: 100%;
height: 60px;
background-color: blue;
margin-bottom: 80px;
}
.chat {
background-color: #ccc;
height: calc(100vh - 80px);
display: flex;
}
.chat_list {
flex: 1;
height: 100%;
background-color: #ee3f4d;
}
.chat_area {
position: relative;
flex: 2;
background-color: #35333c;
}
.chat_head {
background-color: #51c4d3;
height: 60px;
}
.chat_body {
overflow-y: auto;
height: calc(100vh - 295px);
}
.chat_body .other_txt {
display: block;
background: yellow;
padding: 8px;
border-radius: 0 20px 20px 20px;
margin: 10px;
}
.chat_body span {
color: #ccc;
}
.chat_body .own_txt {
display: block;
background: yellow;
margin-left: auto;
padding: 8px;
border-radius: 0 20px 20px 20px;
margin: 10px;
white-space: pre-wrap;
}
.chat_input {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #43b244;
height: 150px;
}
.chat_input .input_message {
resize: none;
width: 90%;
height: 60px;
margin: 12px 24px;
}
<!-- 聊天室畫面結構 -->
<div class="wrap">
<div class="head">head</div>
<div class="content">
<div class="chat">
<div class="chat_list">contact__list</div>
<div class="chat_area">
<div class="chat_head">contact__tool</div>
<div class="chat_body">
<div class="other">
<p class="other_txt">
hello~
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
</p>
<span>20210827 10:00</span>
</div>
</div>
<div class="chat_input">
<textarea class="input_message" placeholder="enterMessage"></textarea>
</div>
</div>
</div>
</div>
</div>

For question 1, if you want to remove the slide bar for div chat_body, you can change y-overflow accordingly, like hidden.
For question 2, if you want to remove the slide bar for whole html page, you can change the css property of .chat: height: calc(100vh - 140px), then the slide bar for whole html page will be disappered.
Honestly I still cannot understand your requirements after multiple readings, you can share more details about your requirements here.

How to achieve a persistent global navigation bar or menu bar on a website

so i'm fairly new to html and css and all that, I've been practicing making a dummy website and I hit a wall. It is just a "Portfolio" website with three main categories. the Index is just a landing page of sorts. I was making a navigation bar for the page contents and I realized that the whole page loads each time an item from the nav bar is clicked, i was trying to make the nav bar stick somehow. Not to the top, I've already found how to do that, but globally across all the pages.
I tried with iframes since i figured it'd only load inside the container but i couldn't get it to work. The page just loaded entirely. Maybe there's a way with iframes but I read they are troublesome and I just don't know enough about how to work with them, so I scrapped that.
Here´s some code for the nav bar and the corresponding CSS if it helps.
body {
background: #ffffff;
font-family: "proxima-nova", sans-serif;
padding: 0;
margin: 0;
}
.btns {
margin: 0 2%;
width: 38%;
max-width: 193px;
min-width: 60px;
justify-content: space-around;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.btns .btn {
text-decoration: none;
background: #4f1e39;
width: 24%;
min-width: 60px;
max-width: 80px;
color: #ffffff;
padding: 4px 0px;
margin: 4px 0;
}
.btns .btn:hover {
background: #ffffff;
color: #4f1e39;
font-weight: bold;
}
.btns .current {
text-decoration: none;
background: #ffffff;
width: 24%;
min-width: 60px;
max-width: 80px;
color: #4f1e39;
padding: 4px 0px;
margin: 4px 0;
font-weight: bold;
}
.centerstuff {
width: auto;
background-color: #4fc5d6;
display: flex;
flex-wrap: wrap;
}
.minilogobox {
height: 35px;
}
.minilogobox img {
max-width: 100%;
max-height: 100%;
padding: 1px 4px;
}
<nav>
<div class="centerstuff">
<div class="minilogobox">
<a href="../index.html">
<img src="https://i.imgur.com/mCfZDsq.png" alt="mini-logo"
/></a>
</div>
<div class="btns">
<a class="current" href="/work.html"> Work</a>
<a class="btn" href="/about.html"> About</a>
<a class="btn" href="/contact.html"> Contact</a>
</div>
<!---<div class="pagetitle"><h1>/Work</h1></div>-->
</div>
</nav>
So, I know there's a way, maybe I have to learn php or java. I'm sorry if this has been asked before, the only other question I've found was not useful.

Because you are navigating away from the page where your header is rendered, and this is a static html page, that code won't remain. When you navigate to a new page, everything in that html file is rendered, including the header code.
You'll need to use some kind of dynamic library to render the html you want to load, while keeping the rest in-tact. This is a long step away from type of development you're doing right now.
I would recommend using something like React and React Router to accomplish this.
As a final note however: you really don't need to worry about this. The majority of webpages work this way, your page should be loading fast enough that you don't even or barely notice it. Just include the header code in every page so that it is omni-present.

Here's a simple show and hide section idea, using fragments and css pseudo target selector. Click on a link, show and jump to the appropriate section.
<html>
<head>
<style type='text/css'>
section {
display: none;
}
:target {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href='#about'>About</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>
<section id='about'>
All about me.
</section>
<section id='contact'>
Say hello.
</section>
</body>
</html>
(Please comment if this is an accessibility no no, or provide a fallback/workaround if there isn't adequate browser :target support.)

HTML layout renders differently on fiddle and on browser

I have made a small web page, the source code of which is available on FIDDLE. It uses a jquery plugin which I made for autocomplete.
The plugin adds a new div (.mridautocomplete-list) after the initialized inputs, which contains the autocomplete list :
<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>
<input class="test2">
<div class="mridautocomplete-list"></div>
<input class="test3">
<div class="mridautocomplete-list"></div>
The problem is :
This web page renders perfectly as expected on fiddle
But when I run the same code on my browser ( without fiddle ), it doesn't get displayed properly, shifting all elements ( SHOWN IN SCREENSHOTS ATTACHED )
Can anyone explain what might be causing the problem ?

Your .test2 class is a width of 80%.
The other inputs have a default width of 173px.
If you resize the fiddle window to a larger width, you will see the same issue.
To fix this you could add a display: block to your .test2 class.

Have you already tried the display CSS property? Setting the second input to "display: block" forces the 3rd input to the next line.
Another option is to place the autocomplete Javascript just before the closing body tag. This also worked for me in Chrome, Firefox and Safari.

Text align not working under div using javascript print button

I have placed a div on html page and text under it with center align. A custom java script button is also placed for printing under the div content. When i press a button it previews the text with left align. Please anyone guide how to set or apply my css or style to this div for center align. Complete html code is following written in asp.net. Thanks in advance
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="margin_issue.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1">
<div id="DivForPrint" class="myDivToPrint" style="border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
</form>
</body>
</html>
<script type="text/javascript">
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
</script>
EDIT
Your code is working awesome according to my need. I have little observations that i need to understand. I have copied two portions from your code, CSS and javascript. Please see below.
<style>
.page_size { border: 1px dotted black; text-align: left; width: 800px; height: 950px; }
.instr_date { text-align: right; padding-right: 0px; padding-top: 40px;}
.benef_name {text-align: left; padding-left: 50px; padding-top: 50px; }
.leftDiv { border: 1px dotted black; text-align: left; padding-left: 0px; }
</style>
Javascript
function printDiv(divID) {
var div = document.getElementById(divID).outerHTML;
var mywindow = window.open('', 'Print Contents');
mywindow.document.write('<html><head><title>Print Contents</title>');
mywindow.document.write('<style> .page_size {border: 1px dotted black; text-align: left; width: 800px; height: 950px; }</style>');
mywindow.document.write('<style> .instr_date {text-align: right; padding-right: 0px; padding-top: 40px; }</style>');
mywindow.document.write('<style> .benef_name { text-align: left; padding-left: 50px; padding-top: 50px; }</style>');
mywindow.document.write('<style> .leftDiv {border: 1px dotted black; text-align: left; padding-left: 0px; }</style>');
mywindow.document.write('</head><body>');
mywindow.document.write(div);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
</script>
You can see above i have written two css files, one is normal under style tag and other is injected to java script and i am writing many lines for css in java script. Now i have two simple questions following:-
1- Cannot we write one css which should effect everywhere?.
2- If the answer of first question is no: then how can i avoid writing multiple css lines in java script.
Many thanks.

Have a look at the following to point you in the right direction. Instead of changing the entire page and then reverting it, open a new window to do the print. This will stop any potentially nasty bugs appearing when revert the page. Also having 2 different class names for non-print and print DIVs may be useful. You can put these in an external CSS file and then add the CSS link to the new window aswell.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
</title>
<style>
.myDiv {
border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px;
}
</style>
<script type="text/javascript">
function printDiv(divID) {
var div = document.getElementById(divID).outerHTML;
var mywindow = window.open('', 'Print Contents');
mywindow.document.write('<html><head><title>Print Contents</title>');
mywindow.document.write('<style>.myDiv {border: 1px dotted black; text-align: center; width: 100%;}</style>');
mywindow.document.write('</head><body>');
mywindow.document.write(div);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
</script>
</head>
<body>
<form id="form1">
<div id="DivForPrint" class="myDiv">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
</form>
</body>
</html>

Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser?

Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser its right where then width ends at approximately 1000px is there a way to extend the length of my page or a simple way to hide the scroll bar that is showing vertically? I still want the default browser vertical scroll bar to show. All tips are appreciated thank you!
If you need to seen any of my code just ask thanks again!
HTML:
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href="mfcc.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#fadein {
position: relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
}
-->
</style>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li>Home</li>
<li>Application</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</nav> </center>
<div class="fadein">
<img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
</div>
<div class="bg1">
<img src="images/bg1.jpg" width=1500 height=308 style="position: absolute; left: -125px; top: 477px;">
</div>
<img src="Images/images/newcar.png" width=150 height=150 style="position: relative; top: 320px; left: 100px">
<img src="Images/images/usedcar.png" width=150 height=150 style="position: relative; top: 320px; left: 500px">
<section id="new_car">
<center> <h3>New Car Loan Requirements</h3> </center>
<p> If you're ready to apply for a new car loan, fill out our quick an easy application here at
Iamdrivingtoday.com But obviously, you don't want to waste your time when you don't
know the requirements to get approved for a new car loan. Here's what you'll need to qualify:
</p>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>
<section id="main_section" style="position: relative; right: 0px;">
<article>
<header>
<hgroup>
<center><h1>What is Iamdrivingtoday.com?</h1></center>
</hgroup>
</header>
<p>Iamdrivingtoday.com is where we specialize in providing auto loans for people with bad credit.
We know that new and used car customers in certain times need help
finding the right auto loan provider. If you think you
have a really bad, or low credit rating, or you have been
turned down in the past, chances are we can help!
Our specialty is getting you financed and we guarantee an
approval!</p>
</article>
<article>
<header>
<hgroup>
<center><h1>Having a hard time getting approved?</h1></center>
</hgroup>
</header>
<p>No matter what your prior credit which may be due to bankruptcy, divorce,
foreclosure, repossession, late payments, or unpaid balances we get
you driving the same day no matter your circumstances.
Just fill out the application and drive away today.</p>
</article>
</section>
<div id="new_div">
<aside id="side_news">
<h4>What your Dealer needs!</h4>
<center>Paystubs!</center>
<center>$1000 Down!</center>
<center>Proof of Insurance!</center>
</aside>
</body>
</html>
CSS:
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 998px;
text-align: center;
box-sizing: border-box;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#new_car{
Position: relative;
Top: 20px
}
#bg1{
border: 3px solid black;
}
#main_section{
Position: relative;
border:1px solid black;
color: white;
text-shadow:
2px 2px 0 #000,
1px 1px 0 #000;
background-image:url('tb.png');
background-size: 365px 325px;
background-color:#cccccc;
-webkit-box-flex: 1;
float: right;
margin: 15px;
margin-top: 300px;
margin-right: 625px;
padding: 20px 20px;
}
#side_news{
border: 1px solid black;
width: 250px;
margin: 20px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid black;
}

Best guess without seeing code: You have a set height on that container element with overflow:auto
Edit: After looking at your code, I think the best thing to do in this situation is to encourage you to spend some more time reading up about HTML and CSS. You have a lot of inline styles and you're positioning things that really mess up the natural flow of the document. This isn't a small error that's happening but just fundamentally poor code.
I'm not saying this to be mean, but this scroll bar is the least of your problems.

By default when your contents height or width exceeds the height or width of the container explicitly set by you, the css properties overflow-y and overflow-x are enabled.
Disabling the overflow-y value on that particular element will remove the scrollbar.
overflow-y:hidden
To avoid the content from being clipped, increase the height of the container or reduce the content or vice-versa. Not setting the height explicitly or setting it to auto will ensure the container expands enough to prevent its contents from overflowing.
DEMO

You should use,
overflow-y:hidden; - Use this for hiding the Vertical scroll
overflow-x:auto; - Use this to show Horizontal scroll
For IE8: -ms-overflow-y: hidden;
http://www.w3schools.com/cssref/pr_pos_overflow.asp