如何调整页面边框HTML / CCS的大小

Question

我最近开始使用HTML和CSS并通过制作自己的简历来练习。

目前，我有一个问题，使页面边框与正文中的内容一致。 我已经调整了主体和内部的所有内容以适应1210px，但我无法让页面达到那么大。 我怀疑这是不可能的，因为页面总是看起来像那样，除非我使用我的边距并且只是集中所有内容。 对不起有问题的描述，如果你只是看屏幕截图就更容易看到！ 我使用CSS中的'*'将所有边框显示为红色。 如您所见，页面超出了边界！

我的CSS代码如下：

*
{
    border: red dashed 1px;
}


html {
    width: 1210px;
}

h3 {
    position: relative;
    left: 10px;
    width: 400px;
}

h4 {
    position: relative;
    left: 10px;
    width: 400px;
}

h5 {
    position: relative;
    left: 10px;
    width: 500px;
}
li {
    width: 800px;
}
 #phoneNumber {
 position: relative;
        left: 950px;
        top: -110px;
        font-family: monospace;
        text-decoration:blink;
        color: black;
        width: 200px;
 }

 #emailaddress {
        position: relative;
        left: 630px;
        top: -150px;
        font-family: monospace;
        text-decoration:blink;
        color: black;
 }


#phoneIcon 
{
    position: relative;
    height: 50px;
    width: 50px;
    left: 617px;
    top: -60px;
}

#emailIcon
{
    position: relative;
    height: 50px;
    width: 50px;
    left: 670px;
    top: -130px;

}

body{
    background-color: #C4D2E0;
    width: 1210px;
    margin: 0px;
    padding: 0px;
}

div {
    margin: 5px;
    border-color: blue;
    border-width: thin;
    border-style: solid;
    width: 1200px;
}
span {
    font-style: italic;
    font-weight: 300;
    position: relative;
    left: 10px;
}

#header {

border-width: thin;
border-color:  blue;
border-style: solid;

background-color:#6B8FB2;
position: relative;
height: 250px;
text-align: center;
font-family: monospace;
font-style: oblique;
text-align: justify;
width: 1200px;

}

 #aboutmeDiv
 {
     position: relative;
     max-width: 1100px;
     left: 210px;
     top: -250px;
     margin-right: 800px;
     border-style: dashed green 1px;
     border-width: 0px;
     width: 500px;
 }

.aboutme{

    position: relative;
    left: 10px;
    margin-right: 0px;
    width: 450px;

}

#header h1 {
    position: relative;
    left: 20px;
    top: 4px;
    margin-right: 100px;
    border:0px;
}

#profilePic{

 position: relative;
 left: 15px;
 top: -10px;
 border-color: blue;
 border-width: thin; 
 border-style: solid;
}

#skills{

}

#education{

}

#workexperience{
}

#projects{
}

#volunteering {
}

#footer {
height: 50px;
background-color:#6B8FB2;
border-width: thin;
border-color:  blue;
border-style: solid;
width: 1200px;


text-align: center;

}

#verticalLine
{
    position: absolute;
    width: 0px;
    height: 120px;
    left: 800px;
    top: 70px;
    border-color: blue;
    border-width: thin;
    border-style: solid;

}

我的HTML代码在这里：

 <div id = "skills">
 <h3> Skills:</h3>
 <ul>
 <li>Experience in digital IC design (using ModelSim, Synplify, ispLever etc.).
 <li>Experience in C, C#, Java, SystemVerilog and Assembly programming.</li>
 <li>Experience in programming PIC, ARM and Atmel Microcontrollers.</li>
 <li>Experience in Android app development.</li>
 <li>Strong team worker and adaptable.</li>
 <li>Strong analytical and problem solving skills.</li> 
 <li>Fluency in English, Arabic and Norwegian.</li>
</li></ul>
 </div >

 <div id = "education">
 <h3> Education:</h3>
 <h4><span></span>University of Southampton (ECS)<span></span></h4>
 <h5>MEng Electronic Engineering with Nanotechnology – 2:1 (Honours)
</h5>
<ul>
<li> Fourth year group design project: Spectrum Sensing Using Imagination Technologies UCC
Communications Platform.</li> <!--Itlics-->
<li>Relevant Modules:
C and C# programming, SystemVerilog, Computer Architecture, Digital System Design, Digital Circuits & Microprocessors, 
Design & Test of Digital Systems, Electronic Design, Software Development and Computer Systems Engineering.</li>
</ul>
 <h4><span>Richmond-upon-Thames College, London</span></h4>
 <h5>BTEC National Diploma in Engineering (Triple Distinction). <p></p>AS Level Mathematics (A).</h5>

 </div>

 <div id = "workexperience">
 <h3>Work Experience:</h3>
 <h4><span>Cafe Parfait, Southampton</span></h4>
 <h5>Events Manager (August 2013 – December 2013)</h5>
 <ul>
 <li>Worked with the general manager to design and run a night out for the club.</li>
 <li>Responsible for the employment and day-to-day management of a team of
promoters (10 members).</li>
<li>Was responsible for the promotion of the club in general and the night out.</li>
 </ul>

 <h4></h4><span>SPI Lasers, Southampton</span></h4>
 <h5>Electronic Engineering Intern (July 2012 – October 2012)</h5>
 <ul>
 <li>Characterization and testing of the electronic (low cost) seed boards to ensure new lasers were up to standard.</li>
 <li>Designed a PID controller for a thermoelectric cooler (in C) that was subsequently used in the final products.</li>
 <li>Researched and documented ways of detecting the catastrophic optical damage in order to fix lasers being used in the field.</li>
 <li>Worked with supervisors, engineers and sales staff to achieve the required sales targets as well as develop a new range of low cost lasers.</li>
 </ul>

 <h4><span>Laura Ashley, London</span></h4>
 <h5>Sales Assistant (June 2011 – October 2011)</h5>
 <ul>
 <li>Served the customers and provided product information.</li>
 <li>Represented the company while selling the products provided at the flagship
store.</li>
<li>Helped with the set up of a new flagship store from the ground up.</li>
 </ul>
 </div>

 <div id = "projects">
 <h3>Projects:</h3>
<ul>
<li>Designed a CORDIC processor (SystemVerilog).</li>
<li>Designed a lift controller (implemented on an FPGA using SystemVerilog).</li>
<li>Designed a four-bit multiplied (implemented on a CPLD using SystemVerilog).</li>
<li>Designed a Tune generator (implemented on a PLD using SystemVerilog).</li>
<li>Developed image processing software for medical diagnosis (in C#).</li>
<li>Implemented several cognitive radio algorithms  Imagination Technologies MCP processor using assembly language.</li>
<li>Worked on the design, construction and programming (in C) of a football playing robot.</li>
<li>Designed two different sequence recognizers to be part of a digital IC.</li>
<li>Independently developed a twitter like social media Android application called Yamba.</li>
<li>Developed an Android application to control a custom-made LED cube in 48 hours (during the EMECS-thon competition).</li>
</ul>   
 </div>

 <div id = "volunteering">
 <h3>Volunteering:</h3>
 <h4><span>University of Southampton</span></h3>
 <h5>Opinions Editor for WessexScene Magazine (October 2011-June 2012)</h5>
 <ul>
 <li>Managed a team of writers and edit their work before publishing.</li>
 <li>Wrote several articles to be published on paper and online (on a range of
topics directly affecting the student population).</li>
<li>Promoted the magazine through social media and distribution.</li>
 </ul>
 </div>

 <div id = "footer">
 <p></p>
 </div>

  </body>
</html>

更新：看第二个截图！

最后更新：看第三个截图！

Answer 1

如果您希望正文填充页面的可用宽度，您可以使用：

html, body{
    width:100%;
}

Answer 2

你想要它看起来像这样吗？ （搞砸了我打算张贴一张照片，但我仍然不能因为我的代表也是新的，但你可以自己试试代码）

这是代码：

 { border: red dashed 1px; } h3 { position: relative; left: 10px; width: 400px; } h4 { position: relative; left: 10px; width: 400px; } h5 { position: relative; left: 10px; width: 500px; } li { width: 800px; } #phoneNumber { position: relative; left: 950px; top: -110px; font-family: monospace; text-decoration:blink; color: black; width: 200px; } #emailaddress { position: relative; left: 630px; top: -150px; font-family: monospace; text-decoration:blink; color: black; } #phoneIcon { position: relative; height: 50px; width: 50px; left: 617px; top: -60px; } #emailIcon { position: relative; height: 50px; width: 50px; left: 670px; top: -130px; } body{ background-color: #C4D2E0; width: 100%; margin: 0px; padding: 0px; } div { margin: 5px; border-color: blue; border-width: thin; border-style: solid; width: 99%; } span { font-style: italic; font-weight: 300; position: relative; left: 10px; } #header { border-width: thin; border-color: blue; border-style: solid; background-color:#6B8FB2; position: relative; height: 250px; text-align: center; font-family: monospace; font-style: oblique; text-align: justify; width: 1200px; } #aboutmeDiv { position: relative; max-width: 1100px; left: 210px; top: -250px; margin-right: 800px; border-style: dashed green 1px; border-width: 0px; width: 500px; } .aboutme{ position: relative; left: 10px; margin-right: 0px; width: 450px; } #header h1 { position: relative; left: 20px; top: 4px; margin-right: 100px; border:0px; } #profilePic{ position: relative; left: 15px; top: -10px; border-color: blue; border-width: thin; border-style: solid; } #skills{ } #education{ } #workexperience{ } #projects{ } #volunteering { } #footer { height: 50px; background-color:#6B8FB2; border-width: thin; border-color: blue; border-style: solid; width:99%; text-align: center; } #verticalLine { position: absolute; width: 0px; height: 120px; left: 800px; top: 70px; border-color: blue; border-width: thin; border-style: solid; } 

我只将一些宽度值更改为99％而不是固定像素。 希望这可以帮助。